Flex ДИВ растет вертикально, когда колебались из-за его содержания, но не гнушаясь назад

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: http://jsfiddle.net/P9Ftp/4/