Child doesn't expand when parent has min-height set

Question

I can't seem to make min-height work. The main problem is, my child doesn't get height of parent, thus doesn't set its own height. How can i fix this?

#middle_Wrapper {
  width: 100%;
  min-height: 85vh;
  max-height: 500%;
  height: auto;
}

#main {
  width: 90%;
  height: 100%;
  background-color: red;
  opacity: 0.2;
  position: relative;
}

<div id="middle_Wrapper">
  <main id="main">
     test
  </main>
</div>

You have to set some `height` explicitly on `#middle_Wrapper`. — Mohammad Usman, Jun 02 '17 at 11:15
That doesn't do the trick, i tried it already. But if i set the height, and add more text into HTML, it won't expand, will it? — Dassin, Jun 02 '17 at 11:15

score 4 · Answer 1 · answered Jun 02 '17 at 11:20

Change height : auto to height : 0

#middle_Wrapper {
  width: 100%;
  min-height: 50vh;
  max-height: 500%;
  height: 0; /* change this line */
}

#main {
  width: 90%;
  height: 100%;
  background-color: red;
  opacity: 0.2;
  position: relative;
}

<div id="middle_Wrapper">
  <main id="main">
     test
  </main>
</div>

LKG · Answer 2 · 2017-06-02T11:25:50.963

0

Just add css, you are using % so change it into vh.

#main {
  height: 100vh;
}

#middle_Wrapper {
  width: 100%;
  min-height: 50vh;
  max-height: 500%;
  height: auto;
}

#main {
  width: 90%;
  height: 100vh;
  background-color: red;
  opacity: 0.2;
  position: relative;
}

<div id="middle_Wrapper">
  <main id="main">
     test
  </main>
</div>

edited Jun 02 '17 at 11:25

answered Jun 02 '17 at 11:17

LKG

4,152
1
11
21

Uhh, the main problem is, i forgot to add i wan't the div to expand as more and more HTML text is added, that applies to parent. – Dassin Jun 02 '17 at 11:22

Child doesn't expand when parent has min-height set

2 Answers2