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
likeh-[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
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: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