How to fix a height to 100% of a related element

Question

I'm looking for a solution to fix the max-height of a div related to another div in CSS, if it exceeds it should let use the scrollbar.

I was planned to use flexbox or grid, but I do not success to the result wanted...

The objective is to not specify any height in px but keep something flexible without JS.

// Not looking for JS solution

.parent {
  display: flex;
}

.child1 {
  background: #eeeeee;
  height: 100%
}

.child2 {
  overflow: auto;
  max-height: 100%;
  background: #cccccc
}

<div class="parent">
  <div class="child1">
    <h2>Child1</h2>
    <p>Some content</p>
    <p>Some content</p>
    <p>Some content</p>
    <p>Some content</p>
    <p>Some content</p>
  </div>
  <div class="child2">
    <h2>Child2</h2>
    <p>this content height must not exceed the height of "child1"</p>
    <p>this content height must not exceed the height of "child1"</p>
    <p>this content height must not exceed the height of "child1"</p>
    <p>this content height must not exceed the height of "child1"</p>
    <p>this content height must not exceed the height of "child1"</p>
    <p>this content height must not exceed the height of "child1"</p>
    <p>this content height must not exceed the height of "child1"</p>
    <p>this content height must not exceed the height of "child1"</p>
    <p>this content height must not exceed the height of "child1"</p>
    <p>this content height must not exceed the height of "child1"</p>
    <p>this content height must not exceed the height of "child1"</p>
    <p>this content height must not exceed the height of "child1"</p>
    <p>this content height must not exceed the height of "child1"</p>
    <p>this content height must not exceed the height of "child1"</p>
    <p>this content height must not exceed the height of "child1"</p>
    <p>this content height must not exceed the height of "child1"</p>
    <p>this content height must not exceed the height of "child1"</p>
    <p>this content height must not exceed the height of "child1"</p>
    <p>this content height must not exceed the height of "child1"</p>
    <p>this content height must not exceed the height of "child1"</p>
    <p>this content height must not exceed the height of "child1"</p>
    <p>this content height must not exceed the height of "child1"</p>
    <p>this content height must not exceed the height of "child1"</p>
    <p>this content height must not exceed the height of "child1"</p>
    <p>this content height must not exceed the height of "child1"</p>

  </div>
</div>

you can use this `min-height:max-content;` – Mohammed Shahed Nov 17 '22 at 17:11 — Mohammed Shahed, Nov 17 '22 at 17:11

Giorgi Shalamberidze · Answer 1 · 2022-11-17T17:40:30.940

-1

if you dont want to specify fixed heihgt you can just add max-height: calc(100vh - 200px) it means if screen height = 1000px your div will be not longer than 800px if it is more than it than div will be use scrollbar

.parent {
 display: flex;
 max-height: calc(100vh - 100px)
}

.child1 {
  background: #eeeeee;
  overflow:auto;
  width:max-content;
}

.child2 {
 overflow: auto;
 max-height: 100%;
 background: #cccccc
}

view codepen example here

edited Nov 17 '22 at 17:40

answered Nov 17 '22 at 17:08

Giorgi Shalamberidze

143
1
7

Thank's, but then it's related to viewport. It should be related to child1 – Mike5 Nov 17 '22 at 17:55
in that case without fixed size css didnot work. you must use javascript. best practise is to relate to viewport with max-height property – Giorgi Shalamberidze Nov 17 '22 at 19:27

score -1 · Answer 2 · answered Nov 17 '22 at 17:17

-1

You should set a height property to your parent div https://stackblitz.com/edit/js-dqkz2u?file=index.html,index.js,style.css

answered Nov 17 '22 at 17:17

Kyle Valderrama

31
4

Thank's, but then it's related to viewport. It should be related to child1 – Mike5 Nov 17 '22 at 17:54

score -1 · Answer 3 · answered Nov 17 '22 at 17:46

-1

height: auto; max-height: 100vh;

add these two lines to child2 class

answered Nov 17 '22 at 17:46

kavi castelo

16
1
4

Thank's, but then it's related to viewport. It should be related to child1. It's the content of child1 which must set the height of parent. And child2 related to this height. – Mike5 Nov 17 '22 at 17:56

How to fix a height to 100% of a related element

3 Answers3