<fieldset> flex-wrap does not work properly in Chrome

Question

I’m using the CSS property flex-wrap in some <div> so that I can show them or hide them without breaking the fluidity of the layout. However I noticed that when my container is a <fieldset>, the wrap does not happen in Google Chrome.

Do you have any idea how to render correctly in Chrome?

Or some explanation for this behavior?

If you want to test Here is a Fiddle, below has a snippet, and soon after screenshots of behavior on my machine (Windows 10, Chrome 69.0.3497.100 64-bit, Firefox 62.0 64bit).

[EDIT There is a a repository with the implementation bugs in the browsers.]

/* vvv apenas para melhor apresentação vvv */
*, :before, :after { box-sizing: border-box;}
.content {
  border: 1px solid lightblue;
  padding: 5px;
}
fieldset {
  margin: 0;
  padding: 0;
  border: none; min-width: 0;
}
/* ^^^ apenas para melhor apresentação ^^^ */

.row {
  display: flex;
  flex-wrap: wrap;
}

.row > .column {
  width: 50%;
  padding: 5px;
}

<h3>&lt;div&gt;</h3>
<div class="row">
  <div class="column">
    <div class="content">child</div>
  </div>
  <div class="column">
    <div class="content">child</div>
  </div>
  <div class="column">
    <div class="content">child</div>
  </div>
  <div class="column">
    <div class="content">child</div>
  </div>
</div>


<h3>&lt;fieldset&gt;</h3>
<fieldset class="row">
  <div class="column">
    <div class="content">child</div>
  </div>
  <div class="column">
    <div class="content">child</div>
  </div>
  <div class="column">
    <div class="content">child</div>
  </div>
  <div class="column">
    <div class="content">child</div>
  </div>
</fieldset>

---

Screenshot in Firefox

---

Screenshot in Chrome

Answer 1

The problem is that a <button> or <fieldset> is not designed to be a flex container (or grid).

Affected browsers:

• Chrome
• Edge
• Firefox (partially corrected in version 52)
• Opera
• Safari (fixed in version 11)

It is worth noting that this behavior is applied to only three elements. It is they: <button>, <fieldset> and <legend>.

I believe that the idea behind this concept is to prevent them from turning a button into a table.

To tell this principle you can use a simple technique:

wrap/package the contents of a button with a span and do the span flex container.

<div>
    <button>
        <span><!-- using a div also works but is not valid HTML -->
            <span>Test</span>
            <span>Test</span>
        </span>
    </button>
    <p>
        <span>Test</span>
        <span>Test</span>
    </p>
</div>

CSS

button > span, p {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

To a fieldset we can use another technique that is similar to the first.

Remove the flex property from fieldset and pass the same to a div which will also encapsulate the div item.

.FlexContainer {
  display: flex;
  margin: 1em;
}

.FlexItem {
  background: hsla(0,0%,0%,.1);
  padding: 1em;
  margin: 1em;
}

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

input {
  background: #fff;
  border: 1px solid #aaa;
  margin: 1em;
  padding: 1em;
  width: 8em;
}

<fieldset>
  <div class="FlexContainer">
    <div class="FlexItem">
      <input placeholder="esses campos">
    </div>
    <div class="FlexItem">
      <input placeholder="não deveriam estar">
    </div>
    <div class="FlexItem">
      <input placeholder="em vertical">
    </div>
  </div>
</fieldset>

NOTE: Although they may not be flex containers, a button can be a flex item.

Response drawn from this question of OS