Почему не может быть <fieldset> гибкими контейнерами?

Я попытался создать элемент fieldset с display: flex и display: inline-flex.

Однако это не сработало: flex вел себя как block, а inline-flex вел себя как inline-block.

Это происходит как в Firefox, так и в Chrome, но, как ни странно, он работает в IE.

Это ошибка? Я не мог найти, что fieldset должно иметь какое-либо особое поведение, ни в HTML5, ни в Макет гибкой коробки CSS.

fieldset, div {
    display: flex;
    border: 1px solid;
}

<fieldset>
    <p>foo</p>
    <p>bar</p>
</fieldset>
<div>
    <p>foo</p>
    <p>bar</p>
</div>

Ответ 1

В соответствии с Ошибка 984869 - display: flex не работает для элементов кнопки,

<button> не реализуется (браузерами) в чистом CSS, поэтому они являются бит черного ящика, с точки зрения CSS. Это означает, что они не обязательно реагируют так же, как, например, a <div> будет.

Это не относится к flexbox - например. мы не показываем полосы прокрутки, если вы помещаете overflow:scroll на кнопку, и мы не показываем ее как стол, если вы положили на него display:table.

Отступая еще дальше, это не относится к <button>. Рассматривать <fieldset> ~~и <table>~~, которые также имеют специальное поведение при рендеринге:
data:text/html,<fieldset style="display:flex"><div>abc</div><div>def</div>
В этих случаях Chrome соглашается с нами и игнорирует flexРежим отображения. (о чем свидетельствует тот факт, что "abc" и "def" заканчиваются укладывается вертикально). Тот факт, что они делают то, что вы ожидая на <button style="display:flex">, скорее всего, из-за подробности реализации.

В реализации кнопки Gecko мы делаем hardcode <button> (и <fieldset>, ~~и <table>~~) как имеющие конкретный класс кадров (и, следовательно, конкретный способ выкладки дочерних элементов), независимо от display.

Если вы надежно надежно настроите детей в конкретный режим макета в режиме кросс-браузера, лучше всего используйте обертку-div внутри кнопки, так же, как вам нужно будет внутри ~~a <table> или~~ a <fieldset>.

Поэтому эта ошибка была отмечена как "разрешенная недействительная".

Существует также Ошибка 1047590 - display: flex; не работает в <fieldset>, в настоящее время "неподтвержденный".

Хорошие новости: Firefox 46+ реализует flexbox для <fieldset>. См. ошибка 1230207.

Ответ 2

Я узнаю, что это может быть ошибкой в Chrome и Firefox, где legend и fieldset являются замененными элементами.

Обнаруженные ошибки:

Ошибка Chrome

Ошибка Firefox

Возможное обходное решение:

Возможным обходным решением будет использование <div role="group"> в HTML и применение в CSS div[role='group'] как селектор.

Ответ 3

По моему опыту, я обнаружил, что ни <fieldset>, ни <button>, ни <textarea> не могут правильно использовать display:flex или унаследованные свойства.

Как уже упоминалось ранее, сообщалось об ошибках. Если вы хотите использовать flexbox для управления порядком (например, order:2), вам нужно будет обернуть элемент в div. Если вы хотите, чтобы flexbox контролировал фактический макет и размеры, вы можете захотеть использовать div, а не входной элемент управления (который воняет, я знаю).

Ответ 4

<div role="group">
    <p>foo</p>
    <p>bar</p>
</div>
<div>
    <p>foo</p>
    <p>bar</p>
</div>

Возможно, вам нужна группа ролей, потому что firefox, chrome и я думаю, что у сафари есть ошибка с полями, видимо. Тогда селектор в CSS будет просто

div[role='group'], div {
    display: flex;
    border: 1px solid;
}

Изменить: Вот некоторые проблемы, которые испытывают и другие люди.

Проблема 375693

Проблема 262679

Ответ 5

вы можете добавить дополнительный div в <fieldset> со следующими реквизитами:

flex-inner-wrapper {
  display: inherit;
  flex-flow: inherit;
  justify-content: inherit;
  align-items: inherit;
}