0
328
ViewsDynamic height of sections inisde container. Fill height of divs inside the container
I have a container that either has one or three sections. Inside each sections I have table and there is list of rows inside the table. I want to make all the height of the sections dynamic such that it occupies the entire space. If there are more tables records inside the section than I need to add scroll to table to scroll records. But at all times the entire height should be filled inside the container. How can I have min and max-height for all sections.
Design scenario If there are 2 sections instead of 3: Red is container and blue are sections which contains table.
The structure
Container
section1
table
section 2
table
section 3
table
1 answers
Answer question0
height: auto;
Would fill the container, assuming there is enough content to fill the amount of space you want. If you're also looking for consistent space between the content: Flexbox has property called gap that lets you define the space between your sections:
display: flex;
flex-direction: column;
gap: 10px /* an example number, can be anything you want */;