Fieldset cannot apply flex direction

Question

I have some code I'm working on which contains a fieldset container which cannot be changed. For some reason, I cannot get the fieldset child elements to display as a row inside a flexbox, despite the row being applied.

How can the fieldset flex direction row be achieved? I've built a brief demo that showcases it working on a div but not a fieldset, despite having the same css.

Thanks for any help here.

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>

Seems to be a [bug](https://github.com/w3c/csswg-drafts/issues/321) which applies to Chrome and "Edge". Found the link at [mdn](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset) — Nico O, Apr 05 '19 at 09:34

score 1 · Accepted Answer · answered Apr 05 '19 at 09:35

Fieldset, legends and some other elements can not use flexbox properly. Its a bug.

A possible Solution can be using <div role="group"> in HTML, and add CSS div[role='group'] as selector.

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>

Fieldset cannot apply flex direction

1 Answers1