Flex div is growing vertically when hovered because of its content but not shrinking back

Question

Here is what I did, I extracted the important part: http://jsfiddle.net/P9Ftp/3/

My problem is that if the item contains too much text, it will wrap to the second line. If the space gets too small only if hovered though, it grows in order to show the text properly but does not shrink back down once the mouse leaves the field.

By increasing the left margin but not allowing for more space, the text wraps:

<div id="list">
    <section>
        <div class="pre"></div>
        <div class="content">asdf asdfadsf asdfa sdf adsfadsf asdf a</div>
        <div class="post"></div>
    </section>
</div>

The critical CSS part:

section:hover .content {
    margin-left: 32px;
}

Is this expected behaviour / what can I do to avoid this?

Thanks a lot in advance!

UPDATE: appears to be a Chrome issue. Workaround would be appreciated.

Answer 1

A solution could be to add display: block; to section (or whatever other display style, such as inline-block) This changes slightly the appearance, but maybe you can work on other rules to get the desired result.

In general, I think that adding display: flex; to all elements (body * rule) is too broad, and maybe could lead to undesired results.

Working fiddle on Chrome: http://jsfiddle.net/P9Ftp/4/