CSS child element does not inherit parent height

Question

I want to make some sort of modal box so that parent box will be always smaller than window size but child box may have any height and should have scroll bar if it's height bigger than parent's height.

So, I tried to make this but child element does not inherit parent's height (despite that child height is set to 100%) and I can't apply overflow-y: auto property to the child element for scrolling. This property works only for parent element otherwise child overlaps parent.

How to prevent child element to overlap parent?

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}
.wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.parent {
  min-width: 200px;
  max-width: 300px;
  min-height: 200px;
  max-height: 80%;
  background-color: red;
  box-sizing: border-box;
  padding: 20px;
  /* overflow-y: auto; */ /* works! */
  
}
.child {
  width: 100%;
  height: 100%; /* assumes parents height */
  background-color: blue;
  color: white;
  padding: 10px;
  box-sizing: border-box;
  overflow-y: hidden; /* doesn't work! */
}

<div class="wrapper">
  <div class="parent">
    <div class="child">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero sapiente voluptatem adipisci ex, cum odio deserunt magnam obcaecati incidunt, nemo ipsum corrupti ratione laudantium reprehenderit mollitia ut, eligendi commodi, id!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero sapiente voluptatem adipisci ex, cum odio deserunt magnam obcaecati incidunt, nemo ipsum corrupti ratione laudantium reprehenderit mollitia ut, eligendi commodi, id!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero sapiente voluptatem adipisci ex, cum odio deserunt magnam obcaecati incidunt, nemo ipsum corrupti ratione laudantium reprehenderit mollitia ut, eligendi commodi, id!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero sapiente voluptatem adipisci ex, cum odio deserunt magnam obcaecati incidunt, nemo ipsum corrupti ratione laudantium reprehenderit mollitia ut, eligendi commodi, id!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero sapiente voluptatem adipisci ex, cum odio deserunt magnam obcaecati incidunt, nemo ipsum corrupti ratione laudantium reprehenderit mollitia ut, eligendi commodi, id!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero sapiente voluptatem adipisci ex, cum odio deserunt magnam obcaecati incidunt, nemo ipsum corrupti ratione laudantium reprehenderit mollitia ut, eligendi commodi, id!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero sapiente voluptatem adipisci ex, cum odio deserunt magnam obcaecati incidunt, nemo ipsum corrupti ratione laudantium reprehenderit mollitia ut, eligendi commodi, id!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero sapiente voluptatem adipisci ex, cum odio deserunt magnam obcaecati incidunt, nemo ipsum corrupti ratione laudantium reprehenderit mollitia ut, eligendi commodi, id!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero sapiente voluptatem adipisci ex, cum odio deserunt magnam obcaecati incidunt, nemo ipsum corrupti ratione laudantium reprehenderit mollitia ut, eligendi commodi, id!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero sapiente voluptatem adipisci ex, cum odio deserunt magnam obcaecati incidunt, nemo ipsum corrupti ratione laudantium reprehenderit mollitia ut, eligendi commodi, id!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero sapiente voluptatem adipisci ex, cum odio deserunt magnam obcaecati incidunt, nemo ipsum corrupti ratione laudantium reprehenderit mollitia ut, eligendi commodi, id!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero sapiente voluptatem adipisci ex, cum odio deserunt magnam obcaecati incidunt, nemo ipsum corrupti ratione laudantium reprehenderit mollitia ut, eligendi commodi, id!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero sapiente voluptatem adipisci ex, cum odio deserunt magnam obcaecati incidunt, nemo ipsum corrupti ratione laudantium reprehenderit mollitia ut, eligendi commodi, id!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero sapiente voluptatem adipisci ex, cum odio deserunt magnam obcaecati incidunt, nemo ipsum corrupti ratione laudantium reprehenderit mollitia ut, eligendi commodi, id!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero sapiente voluptatem adipisci ex, cum odio deserunt magnam obcaecati incidunt, nemo ipsum corrupti ratione laudantium reprehenderit mollitia ut, eligendi commodi, id!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero sapiente voluptatem adipisci ex, cum odio deserunt magnam obcaecati incidunt, nemo ipsum corrupti ratione laudantium reprehenderit mollitia ut, eligendi commodi, id!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero sapiente voluptatem adipisci ex, cum odio deserunt magnam obcaecati incidunt, nemo ipsum corrupti ratione laudantium reprehenderit mollitia ut, eligendi commodi, id!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero sapiente voluptatem adipisci ex, cum odio deserunt magnam obcaecati incidunt, nemo ipsum corrupti ratione laudantium reprehenderit mollitia ut, eligendi commodi, id!
    </div>
  </div>
</div>

read this one : https://stackoverflow.com/a/31728799/8620333 (until the end) — Temani Afif, Jan 18 '19 at 10:26
@TemaniAfif, thanks, but I can't find a solution for this issue yet. If I set height for the parent element it would not be resizable with its child content. — mr.boris, Jan 18 '19 at 10:27
why not simply using overflow on parent like you already did? this is the logical way to prevent the overfow — Temani Afif, Jan 18 '19 at 10:29
@TemaniAfif, I thought about it, but then every helper element will be hidden, e.i. if I want to add close button to the parent element. So, this approach is a crutch rather than solution. — mr.boris, Jan 18 '19 at 10:34
then apply the same logic on the child element, add max-height to it also and it will behave the same as his parent. but use `vh` unit for both so make both of them `max-height:80vh` or less for the child element to keep some space for your buttons — Temani Afif, Jan 18 '19 at 10:37
No, this doesn't work. As you mentioned link before absolute positioning solves the problem for the child element. Still more like a crutch. — mr.boris, Jan 18 '19 at 10:40
it does work, check this : https://jsfiddle.net/jn1mk2bx/ no need absolute element, simply use `vh` unit — Temani Afif, Jan 18 '19 at 10:43
a more accurate code with centring and everything: https://jsfiddle.net/jn1mk2bx/1/ — Temani Afif, Jan 18 '19 at 10:45

score 0 · Answer 1 · answered Jan 18 '19 at 10:27

remove max-height of the parent. thanks

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}
.wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.parent {
  min-width: 200px;
  max-width: 300px;
  min-height: 200px;
  background-color: red;
  box-sizing: border-box;
  padding: 20px;
  /* overflow-y: auto; */ /* works! */
}
.child {
  width: 100%;
  height: 100%; /* assumes parents height */
  background-color: blue;
  color: white;
  padding: 10px;
  box-sizing: border-box;
  overflow-y: hidden; /* doesn't work! */
}

<div class="wrapper">
  <div class="parent">
    <div class="child">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero sapiente voluptatem adipisci ex, cum odio deserunt magnam obcaecati incidunt, nemo ipsum corrupti ratione laudantium reprehenderit mollitia ut, eligendi commodi, id!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero sapiente voluptatem adipisci ex, cum odio deserunt magnam obcaecati incidunt, nemo ipsum corrupti ratione laudantium reprehenderit mollitia ut, eligendi commodi, id!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero sapiente voluptatem adipisci ex, cum odio deserunt magnam obcaecati incidunt, nemo ipsum corrupti ratione laudantium reprehenderit mollitia ut, eligendi commodi, id!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero sapiente voluptatem adipisci ex, cum odio deserunt magnam obcaecati incidunt, nemo ipsum corrupti ratione laudantium reprehenderit mollitia ut, eligendi commodi, id!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero sapiente voluptatem adipisci ex, cum odio deserunt magnam obcaecati incidunt, nemo ipsum corrupti ratione laudantium reprehenderit mollitia ut, eligendi commodi, id!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero sapiente voluptatem adipisci ex, cum odio deserunt magnam obcaecati incidunt, nemo ipsum corrupti ratione laudantium reprehenderit mollitia ut, eligendi commodi, id!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero sapiente voluptatem adipisci ex, cum odio deserunt magnam obcaecati incidunt, nemo ipsum corrupti ratione laudantium reprehenderit mollitia ut, eligendi commodi, id!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero sapiente voluptatem adipisci ex, cum odio deserunt magnam obcaecati incidunt, nemo ipsum corrupti ratione laudantium reprehenderit mollitia ut, eligendi commodi, id!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero sapiente voluptatem adipisci ex, cum odio deserunt magnam obcaecati incidunt, nemo ipsum corrupti ratione laudantium reprehenderit mollitia ut, eligendi commodi, id!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero sapiente voluptatem adipisci ex, cum odio deserunt magnam obcaecati incidunt, nemo ipsum corrupti ratione laudantium reprehenderit mollitia ut, eligendi commodi, id!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero sapiente voluptatem adipisci ex, cum odio deserunt magnam obcaecati incidunt, nemo ipsum corrupti ratione laudantium reprehenderit mollitia ut, eligendi commodi, id!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero sapiente voluptatem adipisci ex, cum odio deserunt magnam obcaecati incidunt, nemo ipsum corrupti ratione laudantium reprehenderit mollitia ut, eligendi commodi, id!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero sapiente voluptatem adipisci ex, cum odio deserunt magnam obcaecati incidunt, nemo ipsum corrupti ratione laudantium reprehenderit mollitia ut, eligendi commodi, id!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero sapiente voluptatem adipisci ex, cum odio deserunt magnam obcaecati incidunt, nemo ipsum corrupti ratione laudantium reprehenderit mollitia ut, eligendi commodi, id!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero sapiente voluptatem adipisci ex, cum odio deserunt magnam obcaecati incidunt, nemo ipsum corrupti ratione laudantium reprehenderit mollitia ut, eligendi commodi, id!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero sapiente voluptatem adipisci ex, cum odio deserunt magnam obcaecati incidunt, nemo ipsum corrupti ratione laudantium reprehenderit mollitia ut, eligendi commodi, id!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero sapiente voluptatem adipisci ex, cum odio deserunt magnam obcaecati incidunt, nemo ipsum corrupti ratione laudantium reprehenderit mollitia ut, eligendi commodi, id!
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero sapiente voluptatem adipisci ex, cum odio deserunt magnam obcaecati incidunt, nemo ipsum corrupti ratione laudantium reprehenderit mollitia ut, eligendi commodi, id!
    </div>
  </div>
</div>

score -1 · Answer 2 · answered Jan 18 '19 at 10:29

-1

Remove max-height: 80%; from .parent

answered Jan 18 '19 at 10:29

Martynas Martin

49
4

Parent element should be resizable related to it's child content. – mr.boris Jan 18 '19 at 10:35
remove max-width add width with % in .parent and it will be resizable – Martynas Martin Jan 18 '19 at 10:40

CSS child element does not inherit parent height

2 Answers2