Почему не все элементы flexbox ведут себя как flexbox divs?

Почему flexbox работает неправильно с fieldset или другими тегами div? Я ожидаю, что они будут располагаться рядом друг с другом, как в примере div, так как flex-direction: row; по умолчанию используется в flexbox. Однако fieldset - это сила, применяющая к ним ширину, и я не понимаю, почему.

HTML

<fieldset>
    <div>fieldset flexbox</div>
    <div>1</div>
    <div>2</div>
</fieldset>

<div id="parentdiv">
    <div>div flexbox<div>
    <div>3</div>
    <div>4</div>
</div>

CSS: для всех элементов установлено значение display: flex;

http://jsfiddle.net/c5BB5/1/

Ответы

Ответ 1

Насколько я могу судить, это связано с ошибками браузера с элементом fieldset.

известная проблема с элементами fieldset в Chrome. У Firefox есть аналогичная (очень старая) проблема в том, что legend и fieldset являются заменили элементы.

Я полагаю, что теперь безопаснее использовать <div role="group"> вместо реального набора полей. В вашем CSS вы можете использовать div[role='group'] как ваш селектор. Подробнее см. http://www.deque.com/aria-group-viable-alternative-fieldset-legend.