height 100%, inside height 100% is being pushed by preceeding siblings

Question

already tried looking at

but the 'table with inherit' solution did not work for me

basically what I'm trying to do is to fill up the available height of a parent whose height is also 100%; the problem is i dont want to do overflow-hidden and calc() is not an option since the preceding siblings may have dynamic content

here is a codepen of what im trying to do https://codepen.io/arnotes/pen/PXMojN

<!DOCTYPE html>
<html>

<head>
    <style>
        * {
            box-sizing: border-box;
        }

        .h100 {
            height: 100%;
        }
    </style>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
    <script src="main.js"></script>
</head>

<body style="box-sizing: border-box; height: 100vh !important; margin: 0px; padding: 2em">
    <button>test button</button>
    <br>
    <button>test button</button>
    <br>
    <button>test button</button>
    <div class="h100" style="background-color: red;padding: 2em">
        <button>test button</button>
        <br>
        <button>test button</button>
        <br>
        <button>test button</button>
        <div class="h100" style="background-color:blue;padding: 2em">
            <button>test button</button>
            <br>
            <button>test button</button>
            <br>
            <button>test button</button>
            <div class="h100" style="background-color:yellow">
                test yellow
            </div>
        </div>
    </div>
</body>

</html>

Temani Afif · Accepted Answer · 2019-01-19T09:06:37.587

I think the easiest solution is to use nested flex container where you can rely on flex-grow:1 to make your element fill the remaining space:

* {
  box-sizing: border-box;
}

.h100 {
  flex-grow:1; /*fill the remaining space*/
  display: flex;
  flex-direction: column;
  align-items: flex-start; /*avoid stretch effect on button*/
  width:100%; /*make the div 100%*/
}

body {
  margin: 0;
  height: calc(100vh - 4em); /*Here you need calc to remove padding*/
  padding: 2em;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

button {
  flex-shrink:0; /*avoid button shrinking*/
}

<body style="height: 100vh !important; margin: 0px; padding: 2em">
  <button>test button</button>
  <button>test button</button>
  <button>test button</button>
  <div class="h100" style="background-color: red;padding: 2em">
    <button>test button</button>
    <button>test button</button>
    <button>test button</button>
    <div class="h100" style="background-color:blue;padding: 2em">
      <button>test button</button>
      <button>test button</button>
      <button>test button</button>
      <div class="h100" style="background-color:yellow">
        test yellow
      </div>
    </div>
  </div>

height 100%, inside height 100% is being pushed by preceeding siblings

1 Answers1