Child elements should adjust their height based on the root parent container by utilizing flex properties, even if there is a potential top offset present

Question

Child elements should adjust their height based on the root parent container by utilizing flex properties, even if there is a potential top offset present

I am attempting to nest multiple "blocks" within each other, utilizing flex for this specific case. The structure I am aiming for is as follows:

Parent (highlighted in blue in JSFIDDLE)
- Container: margin-top: 32px, (highlighted in red)
  - Row 1: colored orange (150 px height, width: 100%)
  - Row 2: colored violet (with width: 100%, and taking up the remaining height)

This layout is demonstrated in the code sample provided:

Example 1 on jsfiddle -- issue present

I desire for all embedded divs to either adhere to the specified height (such as 150px for the orange row) or occupy the remaining available height within their parent container. However, the jsfiddle demonstrates that this setup is not functioning as intended: row 2 does not have the required height.

I am aware that it only takes the full height when the parent's height is set to 100%. If I implement this on the container, due to the container's margin-top being set to 32px, both the container and row 2 assume the height of the parent, protruding beyond the parent's bottom boundary. This issue can be observed in this version of the jsfiddle:

Example 2 on jsfiddle -- still not functioning with height:100% on container

How can I resolve this? What would be the correct approach in this scenario?

html css flexbox

Answer 1

Answer №1

Two important things to note here are removing the height: 100% property from .board_divider_bottom and replacing it with flex-grow: 1, which will allow it to take up the available space.

html, body {
  margin: 0;
}

.parent {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  box-sizing: border-box;
  border: 3px solid blue;
}

.board_container {
  display: flex;
  flex-direction: column;
  border: 2px solid red;
  box-sizing: border-box;
  width: 100%;
  margin-top: 32px;
  height: calc(100% - 32px);          /*  changed, reduce with margin-top  */
}

.board_divider_top {
  border: 2px solid orange;
  box-sizing: border-box;
  width: 100%;
  height: 150px;
}

.board_divider_bottom {
  flex-grow: 1;                     /*  added, fill remaining space  */
  border: 2px solid violet;
  box-sizing: border-box;
  width: 100%;
}

<div class="parent">
  <div class="board_container">
    <div class="board_divider_top"></div>
    <div class="board_divider_bottom">I want this to take all the remaining height</div>
  </div>
</div>
<!-- parent -->

Answer 2

Two important things to note here are removing the height: 100% property from .board_divider_bottom and replacing it with flex-grow: 1, which will allow it to take up the available space.

html, body {
  margin: 0;
}

.parent {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  box-sizing: border-box;
  border: 3px solid blue;
}

.board_container {
  display: flex;
  flex-direction: column;
  border: 2px solid red;
  box-sizing: border-box;
  width: 100%;
  margin-top: 32px;
  height: calc(100% - 32px);          /*  changed, reduce with margin-top  */
}

.board_divider_top {
  border: 2px solid orange;
  box-sizing: border-box;
  width: 100%;
  height: 150px;
}

.board_divider_bottom {
  flex-grow: 1;                     /*  added, fill remaining space  */
  border: 2px solid violet;
  box-sizing: border-box;
  width: 100%;
}

<div class="parent">
  <div class="board_container">
    <div class="board_divider_top"></div>
    <div class="board_divider_bottom">I want this to take all the remaining height</div>
  </div>
</div>
<!-- parent -->

Child elements should adjust their height based on the root parent container by utilizing flex properties, even if there is a potential top offset present

Answer №1

Similar questions

What is the best way to create a page that moves on release using HTML/CSS?

Some Android devices experience unusual behavior with inlined icon links

I'm keen on creating a marquee animation using Tailwind and Next.js

Iterate through the MongoDB database array by using the @foreach loop in an Express application

Utilize PHP and a dynamic web framework like Spry to showcase data from two MySQL tables in an

The issue with rendering CSS styles from <style></style> tags in Visual Studio while debugging in VB is causing a problem

The text-overflow property with ellipsis functionality appears to be malfunctioning in Internet Explorer when applied to input elements, yet functions

The spinning wheel goes round and round while executing the location.reload() function

How do I make a div's height equal to 100% of the height of its parent

Drop-down menu in a table cell overflowing with lengthy text, causing the table to collapse

Navigate to a PDF file from an HTML5 application using PhoneGap by accessing an external link

Activate the JavaScript loader while data is being fetched

A unique technique for creating a stunning visual effect with images using

Ways to eliminate the vertical scroll feature in a kendo chart

Troubleshooting Issue: ASP.NET UpdatePanel Not Responding to jQuery

HTML: What is the best way to position one <a> element underneath another <a> element?

Scrolls down to the bottom of the Material-UI popover menu

Tips for adding a class to the output of a jQuery ajax request?

Is there a way I can decrease the width of the input field on the left side?

What is the best way to vertically center all content, including borders, within the columns?