skip to Main Content

This is what I want to achieve

enter image description here

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.

2

Answers


  1. 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>
    Login or Signup to reply.
  2. 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.
Back To Top
Search