У меня есть код, над которым я работаю, который содержит контейнер набора полей, который нельзя изменить. По какой-то причине я не могу заставить дочерние элементы набора полей отображаться в виде строки внутри 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>





Набор полей, легенды и некоторые другие элементы не могут правильно использовать 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>
Кажется, это ошибка, который применяется к Chrome и «Edge». Ссылку нашел на МДН