Работает ли CSS3 box-flex как задумано в этом примере?

Question

Я писал макет приложения, используя свойство box-flex (в Chrome), и обнаружил странное поведение, на мой взгляд, которое мне интересно, может ли это быть ошибкой или я просто игнорирую причину эти работы.

Код выглядит так: http://jsfiddle.net/5tuCh/

При изменении размера "textarea" происходит странное изменение размера "div", так что размерность "div" минус "textarea" равна размеру второго "div", чтобы удовлетворить "box-" flex: 1.0 "Я думаю. Теперь, если причина для box-flex была в том, чтобы упростить компоновку макета, это поведение делает его непригодным в этом случае.

Может быть, я что-то упустил?

Спасибо.

Answer 1

Это на самом деле правильное поведение. От MDN :

Содержащий ящик распределяет доступное дополнительное пространство пропорционально к значению flex каждого из элементов содержимого.

В вашем примере блоки div.text на самом деле отображаются с высотой, что означает, что любое пространство за пределами этого будет равномерно (или, скорее, в соответствии с коэффициентом изгиба) между элементами. Установка height:0 для этих элементов вызовет поведение, которое, я полагаю, вам нужно (fiddle: http://jsfiddle.net/5tuCh/16/); Мне также пришлось удалить объявление height:100% в вашей текстовой области, чтобы предотвратить его падение внутри элемента с нулевой высотой Я бы предположил, что вы можете сделать так, чтобы текстовая область занимала всю высоту родительского элемента, установив его свойство box-flex.

Обновление:

У OP, имеющих проблемы с поведением textarea, возможно, можно решить следующим стилем:

textarea { 
    position:absolute;
    top:10px;right:10px;bottom:10px;left:10px;
    resize:none;
}​

У родительского элемента, конечно, должен быть установлен position:relative, что приведет к тому, что текстовая область займет все доступное пространство в контейнере (с интервалом 10 пикселей между границами). Не уверен, что это то, что ты хотел после этого. Скрипка: http://jsfiddle.net/5tuCh/36/