Height of flex container changing unexpectedly

Question

I am creating a list of elements and spacing them evenly with 4 per row using a flex box with direction row. I also need a surrounding container with flex direction column to have more elements below this. The problem is that I am seeing the height of the flex box inside change sometimes when I use the flex-basis property.

I have tried 4 different options. Here are their descriptions and whether they behave correctly or not:

Flex Basis with 2 options (behaves incorrectly)
Flex Basis with 3 options (behaves incorrectly)
Flex Basis with 4 options (behaves correctly)
No flex basis and only a min-width (behaves correctly)

Here is the CSS of my containing divs in my flexbox (4 per row). Essentially, .box2 works correctly whereas .box1 behaves unexpectedly. Also here is a codepen to illustrate the problem: https://codepen.io/anon/pen/zVWMqb

.container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

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

.box1 {
  flex-basis: 25%;
  min-width: 25%;
}

.box2 {
  min-width: 25%;
}

<h3>Flex basis with 2 options</h3>
<div class='container'>
  <div class='boxes'>
    <div class='box1'>Option 1</div>
    <div class='box1'>Option 2</div>
  </div>
  text below
</div>
<br/>
<h3>Flex basis with 3 options</h3>
<div class='container'>
  <div class='boxes'>
    <div class='box1'>Option 1</div>
    <div class='box1'>Option 2</div>
    <div class='box1'>Option 3</div>
  </div>
  text below
</div>
<br/>
<h3>Flex basis with 4 options</h3>
<div class='container'>
  <div class='boxes'>
    <div class='box1'>Option 1</div>
    <div class='box1'>Option 2</div>
    <div class='box1'>Option 3</div>
    <div class='box1'>Option 4</div>
  </div>
  text below
</div>
<br/>
<h3>Flex basis with 5 options</h3>
<div class='container'>
  <div class='boxes'>
    <div class='box1'>Option 1</div>
    <div class='box1'>Option 2</div>
    <div class='box1'>Option 3</div>
    <div class='box1'>Option 4</div>
    <div class='box1'>Option 5</div>
  </div>
  text below
</div>
<br/>
<h3>Without flex basis</h3>
<div class='container'>
  <div class='boxes'>
    <div class='box2'>Option 1</div>
    <div class='box2'>Option 2</div>
  </div>
  text below
</div>

I would expect there to be no space below the list of options, however, there is in certain cases as shown in the codepen. I do not expect the text to take up any more space than it's line height, so I am confused where the extra space is coming from in some situations but not others.

score 0 · Answer 1 · answered Jul 02 '19 at 11:45

It looks like you've run into yet another bug with wrapping columns in flexbox.

If you remove flex-wrap: wrap from .container, the layout works as you expect. It doesn't appear you need this rule anyway.

Also note that the bug is active in Chrome and Firefox. But your original code works fine in Edge.

Flex layout with column wrap has many bugs. It's possibly the most bug-ridden area in flexbox today. Here are two more examples:

.container {
  display: flex;
  flex-direction: column;
  /* flex-wrap: wrap; */
}

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

.box1 {
  flex-basis: 25%;
  min-width: 25%;
}

.box2 {
  min-width: 25%;
}

<h3>Flex basis with 2 options</h3>
<div class='container'>
  <div class='boxes'>
    <div class='box1'>Option 1</div>
    <div class='box1'>Option 2</div>
  </div>
  text below
</div>
<br/>
<h3>Flex basis with 3 options</h3>
<div class='container'>
  <div class='boxes'>
    <div class='box1'>Option 1</div>
    <div class='box1'>Option 2</div>
    <div class='box1'>Option 3</div>
  </div>
  text below
</div>
<br/>
<h3>Flex basis with 4 options</h3>
<div class='container'>
  <div class='boxes'>
    <div class='box1'>Option 1</div>
    <div class='box1'>Option 2</div>
    <div class='box1'>Option 3</div>
    <div class='box1'>Option 4</div>
  </div>
  text below
</div>
<br/>
<h3>Without flex basis</h3>
<div class='container'>
  <div class='boxes'>
    <div class='box2'>Option 1</div>
    <div class='box2'>Option 2</div>
  </div>
  text below
</div>

Height of flex container changing unexpectedly

1 Answers1