How do I make a div element take up the remaining height of its parent container in CSS?
Antek N

To make a

element take up the remaining height of its parent container in CSS, you can use CSS Flexbox or CSS Grid. Here's a detailed explanation of how you can achieve this: 1. Using CSS Flexbox: Apply the following CSS styles to the parent container:

1
2
3
4
5
 .parent-container {
     display: flex;
     flex-direction: column;
   }

Apply the following CSS styles to the

element that should take up the remaining height:

1
2
3
4
 .remaining-height-div {
     flex-grow: 1;
   }

In this approach, the parent container is set todisplay: flex; to create a flex container, andflex-direction: column; ensures that the child elements are stacked vertically. The

element with the class.remaining-height-div is assignedflex-grow: 1;, which instructs it to take up the remaining vertical space within the parent container. 2. Using CSS Grid: Apply the following CSS styles to the parent container:

1
2
3
4
5
 .parent-container {
     display: grid;
     grid-template-rows: auto 1fr;
   }

Apply the following CSS styles to the

element that should take up the remaining height:

1
2
3
4
 .remaining-height-div {
     grid-row: 2 / span 1;
   }

In this approach, the parent container is set todisplay: grid;, creating a grid container. Thegrid-template-rows property sets the rows of the grid, with the first row taking the height of its content (auto) and the second row (1fr) taking up the remaining vertical space. The

element with the class.remaining-height-div is positioned in the second row usinggrid-row: 2 / span 1;. Choose the approach that best fits your layout and design requirements. Both Flexbox and CSS Grid provide powerful layout capabilities and allow the

element to take up the remaining height of its parent container.

Similar Questions