Nested Flexbox creates phantom whitespace (column + row + flex-basis + wrap)

Question

This is a weird problem - I'm actually not sure if it's a bug, but it behaves the same in both Chrome and Firefox so I'm at a loss.

CodePen Example

When certain conditions are fulfilled, nested Flexboxes creates phantom whitespace:

• outer flexbox with flex-direction: column; flex-wrap: nowrap
• inner flexbox with flex-direction: row; and flex-item with defined flex-basis (or width) such as flex-basis:0

I would like to keep all of those attribute and remove the phantom whitespace, how do I do it?

Or, maybe it's a bug after all?

Answer 1

Not sure I totally understand what's going on, but it appears the issue is that the flex-wrap on your grid-y is collapsing the implicit width: auto on all child divs down to zero.

This, I believe, is where the phantom whitespace is being applied (which you could also get rid of by using white-space: nowrap on grid-x) - before the whole thing is blown back up to the width of grid-y. At any rate, just give the children of grid-y a width of 100% and you're good to go:

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.grid-x,
.grid-y {
  display: flex;
}

.grid-y {
  margin-top: 1.5rem;
  flex-direction: column;
  flex-wrap: wrap;
  background-color: lightblue;
}

.grid-x {
  flex-direction: row;
  width: 100%;
}

.cell {
  flex: 1 0 0;
  border: 3px solid blue;
}

<div class="grid-y">
  <div class="grid-x">
      <div class="cell">phantom space</div>
      <div class="cell"></div>
  </div>
</div>

<div class="grid-y">
  <div> <!-- still broken -->
    <div class="grid-x">
      <div class="cell">also phantom whitespace</div>
      <div class="cell"></div>
    </div>
  </div>
</div>

<div class="grid-y">
  <div style="width: 100%">
    <div class="grid-x">
      <div class="cell">also phantom whitespace</div>
      <div class="cell"></div>
    </div>
  </div>
</div>