CSS: How to get overflow working with 2 layers of flexbox?

HuakunShen
July 5, 2023
301 views
1 vote
2 Answers

This is what I want to achieve

Basically, 2 rows, an input box takes the first row.

The second row should take up the rest of the height. I used flex box with grow to do this.

The second row has 2 columns, the one on the left is a scrollable list.

Problem

I tried to make a similar component with 2 layers of flexbox, one vertital, and one horizontal.

But when I cannot enable the scrollable overflow. The list is always taller than the screen (I want everything to be contained in screen height). It seems like I have to set a specific height for the scrollable list to make it work, but I used grow for its parent flex box and don’t know the exactly height.

Here is a draft of mine: https://codepen.io/huakunshen/pen/WNYEJwO

The scrollable list is not overflow, not scrollable and too long. I can make it work by setting a hard height like height: 10em. But I want its height to take the rest of the height.

BTW, here is another simlified draft: https://codepen.io/huakunshen/pen/gOQxzmM

In this one, I could easily achieve flex box grow + overflow when there is only a single vertical flexbox. I just can’t get it working when there are 2 layers of flex box.

For the demos, I used tailwind to make things tidier.

Note

I have tried to use calc like h-[calc(100vh-5rem)] and it works.However, I don’t think that’s the best way to do it. I don’t want to hard code any height.

Answers

Updated to work without hard coding height of the first row.

If you make the parent element 100vh, then your two flexboxes will probably work:

<body style="margin: 0; padding: 0;">
    <!-- Container -->
    <div style="display: flex; height: 100vh; max-height: 100vh; flex-direction: column; overflow: hidden;">

        <!-- Row 1 -->
        <div style="border: solid 1px #000;">
            Row 1
        </div>

        <!-- Row 2 -->
        <div style="flex-grow: 1; display: flex; overflow: auto; border: solid 1px #000;">

            <!-- Column -->
            <div style="width: 50%; border-right: solid 1px #000; overflow: auto;">
                Column 1 with scrollable content<br />
                Column 1 with scrollable content<br />
                Column 1 with scrollable content<br />
                Column 1 with scrollable content<br />
                Column 1 with scrollable content<br />
                Column 1 with scrollable content<br />
                Column 1 with scrollable content<br />
                Column 1 with scrollable content<br />
                Column 1 with scrollable content<br />
                Column 1 with scrollable content<br />
                Column 1 with scrollable content<br />
                Column 1 with scrollable content<br />
                Column 1 with scrollable content<br />
                Column 1 with scrollable content<br />
                Column 1 with scrollable content<br />
                Column 1 with scrollable content<br />
                Column 1 with scrollable content<br />
                Column 1 with scrollable content<br />
                Column 1 with scrollable content<br />
                Column 1 with scrollable content<br />
                Column 1 with scrollable content<br />
                Column 1 with scrollable content<br />
                Column 1 with scrollable content<br />
                Column 1 with scrollable content<br />
                Column 1 with scrollable content<br />
                Column 1 with scrollable content<br />
                Column 1 with scrollable content<br />
                Column 1 with scrollable content<br />
                Column 1 with scrollable content<br />
                Column 1 with scrollable content<br />
                Column 1 with scrollable content<br />
                Column 1 with scrollable content<br />
                Column 1 with scrollable content<br />
                Column 1 with scrollable content<br />
                Column 1 with scrollable content<br />
                Column 1 with scrollable content<br />
                Column 1 with scrollable content<br />
                Column 1 with scrollable content<br />
                Column 1 with scrollable content<br />
                Column 1 with scrollable content<br />
                Column 1 with scrollable content<br />
                Column 1 with scrollable content<br />
                Column 1 with scrollable content<br />
                Column 1 with scrollable content<br />
                Column 1 with scrollable content<br />
                Column 1 with scrollable content<br />
                Column 1 with scrollable content<br />
                Column 1 with scrollable content<br />
                Column 1 with scrollable content<br />
                Column 1 with scrollable content<br />
                Column 1 with scrollable content<br />
                Column 1 with scrollable content<br />
                Column 1 with scrollable content<br />
                Column 1 with scrollable content<br />
                Column 1 with scrollable content<br />
                Column 1 with scrollable content<br />
                Column 1 with scrollable content<br />
                Column 1 with scrollable content<br />
                Column 1 with scrollable content<br />
                Column 1 with scrollable content<br />
                Column 1 with scrollable content<br />
                Column 1 with scrollable content<br />
                Column 1 with scrollable content<br />
                Column 1 with scrollable content<br />
                Column 1 with scrollable content<br />
                Column 1 with scrollable content<br />
                Column 1 with scrollable content<br />
                Column 1 with scrollable content<br />
                Column 1 with scrollable content<br />
                Column 1 with scrollable content<br />
                Column 1 with scrollable content<br />
                Column 1 with scrollable content<br />
                Column 1 with scrollable content<br />
                Column 1 with scrollable content<br />
                Column 1 with scrollable content<br />
                Column 1 with scrollable content<br />
                Column 1 with scrollable content<br />
                Column 1 with scrollable content<br />
                Column 1 with scrollable content<br />
                Column 1 with scrollable content<br />
                Column 1 with scrollable content<br />
                Column 1 with scrollable content<br />
                Column 1 with scrollable content<br />
                Column 1 with scrollable content<br />
                Column 1 with scrollable content<br />
                Column 1 with scrollable content<br />
                Column 1 with scrollable content<br />
                Column 1 with scrollable content<br />
                Column 1 with scrollable content<br />
                Column 1 with scrollable content<br />
                Column 1 with scrollable content<br />
                Column 1 with scrollable content<br />
                Column 1 with scrollable content<br />
                Column 1 with scrollable content<br />
                Column 1 with scrollable content<br />
                Column 1 with scrollable content<br />
                Column 1 with scrollable content<br />
                Column 1 with scrollable content<br />
                Column 1 with scrollable content<br />
                Column 1 with scrollable content<br />
                Column 1 with scrollable content<br />
                Column 1 with scrollable content<br />
                Column 1 with scrollable content<br />
                Column 1 with scrollable content<br />
                Column 1 with scrollable content<br />
                Column 1 with scrollable content<br />
                Column 1 with scrollable content<br />
                Column 1 with scrollable content<br />
                Column 1 with scrollable content<br />
                Column 1 with scrollable content<br />
                Column 1 with scrollable content<br />
                Column 1 with scrollable content<br />
                Column 1 with scrollable content<br />
                Column 1 with scrollable content<br />
                Column 1 with scrollable content<br />
                Column 1 with scrollable content<br />
                Column 1 with scrollable content<br />
                Column 1 with scrollable content<br />
                Column 1 with scrollable content<br />
                Column 1 with scrollable content<br />
                Column 1 with scrollable content<br />
                Column 1 with scrollable content<br />
                Column 1 with scrollable content<br />
                Column 1 with scrollable content<br />
                Column 1 with scrollable content<br />
                Column 1 with scrollable content<br />
                Column 1 with scrollable content<br />
                Column 1 with scrollable content<br />
                Column 1 with scrollable content<br />
                Column 1 with scrollable content<br />
                Column 1 with scrollable content<br />
            </div>

            <!-- Column -->
            <div style="width: 50%; overflow: auto;">
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
                Column 2 with scrollable content<br />
            </div>

        </div>

    </div>
</body>

- MdRakibulIslam
- July 5, 2023 at 10:38 pm
- 0 votes
0
I also think that coding hard-coded height is not good but so far I know, in this case, this is your only option.

And where you said h-[calc(100vh-5rem)]

It should be negative "3rem" not "5rem" (I calculated and tested it)

Container padding (1rem) + input (1.5rem) + margin-top (0.5rem) = 3

Login or Signup to reply.

Please signup or login to give your own answer.

Click here to cancel reply.