Use flex column with wrap in a div taking up all remaining space

Question

I'm using tailwind but my question pertains more to flexbox. I have these 4 'nodes' that I want to wrap in columns, however they are not wrapping when the width is over. I don't want the page to exceed the height of the page. Here is my current attempt:

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.0.2/tailwind.min.css" rel="stylesheet"/>
<div class="flex flex-col bg-blue-100 h-screen">
  <h1 class="text-center text-3xl bg-blue-200 py-2">My Header</h1>
  
  <div class="flex-auto flex flex-col flex-wrap">
    <div class="bg-blue-300 border-2 border-black h-16 w-12"></div>
    <div class="bg-blue-300 border-2 border-black h-16 w-12"></div>
    <div class="bg-blue-300 border-2 border-black h-16 w-12"></div>
    <div class="bg-blue-300 border-2 border-black h-16 w-12"></div>
  </div>
</div>

My intended goal is for layout to look something similar to this:

I know this problem might be related due to the fact that the browser doesn't know when wrapping starts to happen, but I am still yet to find a solution that makes sense to me.

you need min-height:0 on the container – Temani Afif Jan 29 '21 at 14:55 — Temani Afif, Jan 29 '21 at 14:55

score 2 · Accepted Answer · answered Jan 29 '21 at 13:51

2

First, I tried adding a fixed height to the flex parent and that seemed to work but was not a very elegant solution. So I settled on this :) Adding the overflow parameter seemed to do the trick.

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.0.2/tailwind.min.css" rel="stylesheet"/>
<div class="flex flex-col bg-blue-100 h-screen">
  <h1 class="text-center text-3xl bg-blue-200 py-2">My Header</h1>
  
  <div class="flex-auto flex flex-col flex-wrap overflow-auto">
    <div class="bg-blue-300 border-2 border-black h-16 w-12"></div>
    <div class="bg-blue-300 border-2 border-black h-16 w-12"></div>
    <div class="bg-blue-300 border-2 border-black h-16 w-12"></div>
    <div class="bg-blue-300 border-2 border-black h-16 w-12"></div>
  </div>
</div>

answered Jan 29 '21 at 13:51

Merlijn

64
5

That's wicked! Thank you so much. Just out of curiosity though, why does this work? – Hamza ALI Jan 29 '21 at 13:53
@HamzaAli To be honest I don't know why this works. It was kinda a happy accident. In your snippet, the flex children overflow the parent and I got curious what would happen when you add scrolling to a wrapping flex parent. Sorry! It might be a good idea to check some other browsers just to be sure that this is not a one off. – Merlijn Jan 29 '21 at 14:05
1

@Merjlijn seems to be working in firefox and chrome at the very least :) – Hamza ALI Jan 29 '21 at 14:18

Use flex column with wrap in a div taking up all remaining space

1 Answers1