Fieldset не может применить направление гибкости

У меня есть код, над которым я работаю, который содержит контейнер набора полей, который нельзя изменить. По какой-то причине я не могу заставить дочерние элементы набора полей отображаться в виде строки внутри flexbox, несмотря на то, что строка применяется.

Как можно получить строку направления гибкости fieldset? Я создал краткую демонстрацию, которая демонстрирует работу с div, но не с набором полей, несмотря на то, что у меня тот же css.

Спасибо за любую помощь здесь.

span {
  background: lightgreen;
}
span:nth-of-type(odd) {
  background: pink;
}

div, fieldset {
  display: flex;
  flex-flow: row wrap;
}
<fieldset>
  <span>text 1</span>
  <span>text 2</span>
  <span>text 3</span>
</fieldset>

<div>
  <span>text 1</span>
  <span>text 2</span>
  <span>text 3</span>
</div>

Кажется, это ошибка, который применяется к Chrome и «Edge». Ссылку нашел на МДН

Nico O 05.04.2019 11:34
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
4
1
1 235
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Набор полей, легенды и некоторые другие элементы не могут правильно использовать flexbox. Это ошибка.

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

span {
  background: lightgreen;
}
span:nth-of-type(odd) {
  background: pink;
}

div, div[role='group']{
  display: flex;
  flex-flow: row wrap;
}
<div role = "group">
  <span>text 1</span>
  <span>text 2</span>
  <span>text 3</span>
</div>

<div>
  <span>text 1</span>
  <span>text 2</span>
  <span>text 3</span>
</div>

Другие вопросы по теме