Make flex-wrap ignore certain elements

Question

I have a 4-column flex-box layout with flex-wrap enabled:

When I resize the page and the edge of page touches the <h1> header, the blue column correctly wraps down:

What I now want to do is to add let's say 25 images next to each other inside a div that overflows on x, brings up a scrollbar, but doesn't wrap the blue column downwards unless the other content gets too small

So the scrollbar comes up correctly, but as soon as it does, the blue column tries to expand and wraps down. I want the image reel to always be smaller than the blue column, but even if i set it to 50% width, it still expands the blue column which then wraps.

Is there a way to only make the blue column wrap if the content is smaller than the <h1> tag and totally ignore the image reel?

I've made a codepen snippet for it and also added sample code below:

 * { box-sizing: border-box; } body { margin: 0; padding: 0; color: white; } .green { background-color: green; } .red { background-color: red; } .blue { background-color: blue; } .black { background-color: black; } .display\\:flex { display: flex; } .flex-direction\\:column { flex-direction: column; } .flex-direction\\:row { flex-direction: row; } .flex-wrap\\:wrap { flex-wrap: wrap; } .flex-grow\\:100 { flex-grow: 100; } .flex-grow\\:2 { flex-grow: 2; } .flex-grow\\:1 { flex-grow: 1; } .flex-grow\\:0 { flex-grow: 0; } .flex-shrink\\:1 { flex-shrink: 1; } .height\\:100vh { height: 100vh; } .reel { display: flex; overflow-x: auto; } .reel>img { height: auto; max-width: 25%; } .reel>*+* { margin-left: 10px; }

 <div class="display:flex flex-direction:row flex-wrap:wrap height:100vh"> <div class="black flex-grow:0"> Column1 </div> <div class="red flex-grow:1"> Column2 <br /> <input> <br /> <input> </div> <div class="green flex-grow:2"> Column3 <br /> <input> <br /> <input> </div> <div class="blue flex-grow:100"> <h1> This is some long header text in Column4 </h1> <div class="reel"> <img src="https://i.imgur.com/M7LUTq5.jpg"> <img src="https://i.imgur.com/M7LUTq5.jpg"> <img src="https://i.imgur.com/M7LUTq5.jpg"> <img src="https://i.imgur.com/M7LUTq5.jpg"> <img src="https://i.imgur.com/M7LUTq5.jpg"> <img src="https://i.imgur.com/M7LUTq5.jpg"> <img src="https://i.imgur.com/M7LUTq5.jpg"> <img src="https://i.imgur.com/M7LUTq5.jpg"> <img src="https://i.imgur.com/M7LUTq5.jpg"> <img src="https://i.imgur.com/M7LUTq5.jpg"> <img src="https://i.imgur.com/M7LUTq5.jpg"> <img src="https://i.imgur.com/M7LUTq5.jpg"> <img src="https://i.imgur.com/M7LUTq5.jpg"> <img src="https://i.imgur.com/M7LUTq5.jpg"> <img src="https://i.imgur.com/M7LUTq5.jpg"> </div> </div> </div>

Answer 1

1) Settings .reel>img { flex-shrink: 0 } will show the scrollbar under your images

2) When you don't use flex-grow for relative growth compared to sibling elements, but just set .red,.green,.blue { flex-grow: 1 } and use flex-basis: xx% per color then the wrapping occurs.

Somehow the browser needs a width to work with. See /* ADDED CODE */ in the CSS...

UPDATE

The OP inquired:

Is there a way to keep the black, red and green columns from taking up more space than they need so that the blue column eats up all the available space?

This can be achieved by setting all but .blue to flex-grow: 0; flex-basis: auto flex-grow: 0; flex-basis: auto (flexbox defaults) to start with and .blue flexbasis to a percentage > 0% and < 100% (more exact: less than 100% minus the total width of .black , .red and .green ). Setting .blue { flex-basis: auto } will not work as it will immediately wrap because of its flex-grow: 1 .

Updated the code to reflect the above (OVERRIDE 1) and added the final values the OP eventually used (OVERRIDE 2).

Simply try and see what works for you...

 * { box-sizing: border-box; } body { margin: 0; padding: 0; color: white; } /* ADDED CODE (original answer) */ .black { flex-basis: 5% } /* example values */ .red { flex-basis: 15% } .green { flex-basis: 30% } .blue { flex-basis: 50% } /* [MUST] add up to 100% */ .reel > img { flex-shrink: 0; } /* OVERRIDE 1: ADDED CODE, as per OP remarks (UPDATE) */ .black { flex-basis: auto } .red { flex-basis: auto } .green { flex-basis: auto } .blue { flex-basis: 25% } /* OVERRIDE 2: OP final choice */ .black { flex-basis: 50px } .red { flex-basis: 100px } .green { flex-basis: 100px } .blue { flex-basis: 25% } /**/ .green { background-color: green; } .red { background-color: red; } .blue { background-color: blue; } .black { background-color: black; } .display\\:flex { display: flex; } .flex-direction\\:column { flex-direction: column; } .flex-direction\\:row { flex-direction: row; } .flex-wrap\\:wrap { flex-wrap: wrap; } .flex-grow\\:100 { flex-grow: 100; } .flex-grow\\:2 { flex-grow: 2; } .flex-grow\\:1 { flex-grow: 1; } .flex-grow\\:0 { flex-grow: 0; } .flex-shrink\\:1 { flex-shrink: 1; } .height\\:100vh { height: 100vh; } .reel { display: flex; overflow-x: auto; } .reel > img { height: auto; max-width: 25%; } .reel > * + * { margin-left: 10px; }

 <body class="width:100%"> <div class="display:flex flex-direction:row flex-wrap:wrap height:100vh"> <div class="black flex-grow:0"> Column1 </div> <div class="red flex-grow:1"> Column2 <br /> <input> <br /> <input> </div> <div class="green flex-grow:1"> Column3 <br /> <input> <br /> <input> </div> <div class="blue flex-grow:1"> <h1> This is some long header text in Column4 </h1> <div class="reel"> <img src="https://i.imgur.com/M7LUTq5.jpg"> <img src="https://i.imgur.com/M7LUTq5.jpg"> <img src="https://i.imgur.com/M7LUTq5.jpg"> <img src="https://i.imgur.com/M7LUTq5.jpg"> <img src="https://i.imgur.com/M7LUTq5.jpg"> <img src="https://i.imgur.com/M7LUTq5.jpg"> <img src="https://i.imgur.com/M7LUTq5.jpg"> <img src="https://i.imgur.com/M7LUTq5.jpg"> <img src="https://i.imgur.com/M7LUTq5.jpg"> <img src="https://i.imgur.com/M7LUTq5.jpg"> <img src="https://i.imgur.com/M7LUTq5.jpg"> <img src="https://i.imgur.com/M7LUTq5.jpg"> <img src="https://i.imgur.com/M7LUTq5.jpg"> <img src="https://i.imgur.com/M7LUTq5.jpg"> <img src="https://i.imgur.com/M7LUTq5.jpg"> </div> </div> </div> </body>