html - Flex div 由于其内容而悬停时会垂直增长但不会收缩

Question

这是我所做的，我提取了重要部分:http://jsfiddle.net/P9Ftp/3/

我的问题是，如果该元素包含太多文本，它将换行到第二行。如果仅在悬停时空间变得太小，它会变大以正确显示文本，但一旦鼠标离开该字段就不会缩小。

通过增加左边距但不留出更多空间，文本换行:

<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>

关键的 CSS 部分:

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

这是预期的行为吗/我该怎么做才能避免这种情况？

提前致谢!

更新:似乎是 Chrome 的问题。解决方法将不胜感激。

Answer 1

一个解决方案是将 display: block; 添加到 section(或任何其他显示样式，例如 inline-block) 这会稍微改变外观，但也许您可以使用其他规则来获得所需的结果。

总的来说，我认为将 display: flex; 添加到所有元素(body * 规则)过于宽泛，可能会导致不良结果。

Chrome 上的工作 fiddle :http://jsfiddle.net/P9Ftp/4/