如果行中没有足够的空间，请将弹性方向切换到列

Question

In the example below, what I want is to have .inner-flexbox have flex-direction: row; when its child elements can fit on a single row, but switch to flex-direction: column; when they cannot. I don't think media queries are what I want here because I would be basing them on whether the viewport width is greater than or less than the width of all the <div> s in .inner-flexbox in a row plus the width of the <aside> . Basically, I don't want the items inside .inner-flexbox wrapping—I want them either all in one row, or all in one column.

(distilled example): I have a flexbox that contains two items. One is a "normal" element, the other is another flexbox.

 .outer-wrapper { display:flex; width: 100%; height: auto; background-color: gray; flex-wrap: nowrap; } .inner-flexbox { display: flex; flex-wrap: wrap; flex-direction: row; } .inner-flexbox > div { width: 10rem; height: 10rem; background-color: salmon; margin: 10px; } aside { background-color: blue; width: 15rem; height: 15rem; } 

 <div class="outer-wrapper"> <div class="inner-flexbox"> <div>Block 1</div> <div>Block 2</div> <div>Block 3</div> </div> <aside><!-- Other content here --></aside> </div> 

Answer 1

Try This Code

 .outer-wrapper { display: flex; width: 100%; height: auto; background-color: gray; flex-wrap: nowrap; } .inner-flexbox { width: 75%; display: flex; flex-wrap: wrap; flex-direction: row; flex-flow: row wrap; justify-content: space-between; } .inner-flexbox>div { width: 10rem; height: 10rem; background-color: salmon; margin: 10px; } aside { width: 25%; background-color: blue; width: 15rem; height: 15rem; float: right; display: block; } 

 <div class="outer-wrapper"> <div class="inner-flexbox"> <div>Block 1</div> <div>Block 2</div> <div>Block 3</div> </div> <aside> <!-- Other content here --> </aside> </div> 

Answer 2

In the end I resorted to scripting, as @LGSon suggested. I used jQuery to compare the total width of the inner flexbox to the width of the container minus the width of the item next to it.