fieldset with flex-wrap does not work correctly in Chrome

Question

fieldset with flex-wrap does not work correctly in Chrome

Navigation

#1 by (2 votes)

3

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

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

Or any explanation for this behavior?

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

[ EDIT There is a repository with implementation bugs in 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>

Firefox Screenshot

ChromeScreenshot

html css flexbox

asked by anonymous 18.09.2018 / 20:24

1 answer

How to validate the JSON schema in C #? Problem with vector with dynamic allocation

score 2 · Accepted Answer

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

Affected browsers:

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

Note that this behavior is applied to only three elements. They are: <button> , <fieldset> and <legend> .

I think the idea behind this concept is to prevent them from making a button on a table.

To count this principle you can use 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;
}

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

Remove the flex property from fieldset and pass it to an internal div that 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 can not be flex containers, a button can be a flex item.

Response extracted from this question from the SO