Nested Column Flexbox Inside Row Flexbox with Wrapping

Nested column flexbox inside row flexbox with wrapping

I've been playing with this for a few minutes now, and I think I've got what you're looking for.

Here's the CSS

.flex-group {
    margin: auto;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

.flex-container {
    flex: 0 1 auto;

    display: flex;
    flex-flow: row wrap;
    align-items: space-around;
    align-content: flex-start;

    padding: 0;
    margin: 0;
    list-style: none;
    border: 1px solid silver;
}

.red li {
    background: red;
}

.gold li {
    background: gold;
}

.blue li {
    background: deepskyblue;
}

.flex-item {
    flex: 0 1 auto;

    padding: 5px;
    width: 100px;
    height: 100px;
    margin: 10px;

    line-height: 100px;
    color: white;
    font-weight: bold;
    font-size: 2em;
    text-align: center;
}

And here's an updated fiddle to see it in action.

Nested flex-box wrapping issue

Here is what you desire. What you need to change :

For the flex-column it should be flex: 1; instead of flex-grow:1; and set a min-width to it. This way, it can grow and shrink both.

Using flex-grow:1 limits the container to only grow but not shrink and since you're using the flex-column class in the initial container i.e flex-row you need it to be flexible as the viewport is resized.

/* Styles go here */
.flex-row {  display: flex;  flex-direction: flex-row;  flex-grow: 1;}
.flex-column {  display: flex;  flex-direction: column;  min-width:100px;  flex: 1;  border: 1px solid lightgray;}
.box {  display:flex;  flex-shrink:1;  border: 1px solid green;  height:100px;  width:300px;  min-width:150px;}

<!DOCTYPE html><html>
  <head>    <link rel="stylesheet" href="style.css">    <script src="script.js"></script>  </head>
  <body>    <div class="flex-row" style="flex-wrap:wrap">      <div class="flex-column" style="flex-grow:0">          Column 1      </div>            <div class="flex-column" style="flex-grow:0;width:200px">        Column 2      </div>            <div class="flex-column">        <div class="flex-row" style="min-width:500px;flex-wrap:wrap">          <div class="box">Box 1</div>          <div class="box">Box 2</div>          <div class="box">Box 3</div>          <div class="box">Box 4</div>          <div class="box">Box 5</div>          <div class="box">Box 6</div>          <div class="box">Box 7</div>        </div>      </div>    </div>  </body>
</html>

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

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>

Nested row flexbox with wrapping on multiple levels

You can achieve this by using flex: 1.

Remember that flex is a shorthand property for flex: 1 1 0 or flex-grow: 1, flex-shrink: 1 and flex-basis: 0.
As a result, this makes the elements take any empty space in the container, hopping to the next line if theres no space left.

https://css-tricks.com/understanding-flex-grow-flex-shrink-and-flex-basis/

Nested flexbox row wrap order?

You will need a media query (or script) to accomplish that properly, and the reason is that when the children won't fit their parent's width, it's the outer siblings that will wrap, before inner one's does, and this is the normal wrapping order, regardless of using Flexbox or not.

Since we know the width of each item, sum them plus the borders, and we get a break point at 608px + the body margin, which I here reset to 0, as it might differ between the browsers.

Then, at the break point, you simply e.g. change flex: 1 0 auto to flex: 0 0 auto, and it will wrap and center properly.

Updated fiddle

Stack snippet

body {  margin: 0;}.wrapper1 {  display: flex;  flex-flow: row wrap;  justify-content: center;  border: 2px solid blue;}.wrapper2 {  display: flex;  flex-flow: row wrap;  flex: 1 0 auto;  min-width: 200px;  max-width: 400px;  border: 2px solid red;}.object {  flex: 0 0 200px;  height: 100px;}.obj1 {  background-color: #aaccaa;}.obj2 {  background-color: #ccaaaa;}.obj3 {  background-color: #aaaacc;}
@media (max-width: 608px) {  .wrapper2 {    flex: 0 0 auto;  }  }

<div class="wrapper1">  <div class="object obj1"></div>  <div class="wrapper2">    <div class="object obj2"></div>    <div class="object obj3"></div>  </div></div>

flex-wrap not working in nested flex container

This may be a bug with a column wrap flex container. The cyan box is refusing to shrink, which prevents the red box from wrapping.

You could set a width to the second column or .foo2 or .foo3, and that will force the items to wrap. But that's probably not what you want.

One workaround is to not use column wrap in this case. Stick to row nowrap:

.column {  display: flex;  background: orange;  height: 150px;}
.foo,.foo1,.foo3 {  display: flex;  justify-content: center;  color: #333;  text-align: center;  padding: 1em;  background: #ffea61;  box-shadow: 0 0 0.5em #999;}
.foo {  flex: 1;}
.foo1 {  flex: 0 0 200px;  background: green;}
.foo2 {  display: flex;  background: pink;  padding: 10px;}
.foo3 {  flex-wrap: wrap;  margin: 0 auto;  background: cyan;}
.bar1,.bar2 {  background: blue;  width: 50px;  height: 30px;}
.bar2 {  background: red;}

<div class="column">  <div class="foo1"></div>  <div class="foo">    <div class="foo2">      <div class="foo3">        <div class="bar1"></div>        <div class="bar2"></div>      </div>    </div>  </div>  <div class="foo1"></div></div>

Nested flexbox column inside row, with full height children

Apply a width to the stage div equal to the div widths + margin and the justify-content:space-aound on the stage divs

.App {  display: flex;  height: 100%;}
.stage {  display: flex;  width: 52px;  flex-direction: column;  justify-content: space-around;}
.box {  height: 50px;  width: 50px;  background-color: red;  margin: 1px;}

<div class="App">  <div class="stage">    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>  </div>  <div class="stage">    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>  </div>  <div class="stage">    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>  </div>  <div class="stage">    <div class="box"></div>    <div class="box"></div>  </div>  <div class="stage">    <div class="box"></div>  </div></div>

Can you make a nested column flexbox as small but as wide as possible

If you remove the flex-direction: column and the flex: 1 to the first group, you should get what you want.

.flexbox {  display: flex;  flex-wrap: wrap;}
.flexbox-column {  flex-direction: column;}
.red {  background-color: red;}
.blue {  background-color: blue;}
.black {  background-color: black;}
.gray {  background-color: gray;}
.green {  background-color: green;}
.yellow {  background-color: yellow;}
.orange {  background-color: orange;}
.violet {  background-color: violet;}
.flexbox-element {  width: 200px;  min-height: 200px;}
.flexbox-group {  width: 400px;  height: 600px;  flex-direction: column;}

<div class="flexbox" style="flex: 1; width: 500px">  <div class="flexbox flexbox-element flexbox-group">    <div class="flexbox-element red"></div>    <div class="flexbox-element green"></div>    <div class="flexbox-element blue"></div>    <div class="flexbox-element black"></div>    <div class="flexbox-element gray"></div>  </div>  <div class="flexbox-element yellow"></div>  <div class="flexbox-element orange"></div>  <div class="flexbox-element violet"></div></div>

Nested Column Flexbox Inside Row Flexbox with Wrapping