CODEWITHSUNDEEP
css
user1031742
user1031742

Reputation: 424

keep 100vh height inside parent with overflow

I have a parent div with overflow. After changing viewport height (rotate the device or just change window size) - child div maintains the height. How to make it adjust to current height (100% of the viewport)?

<div class="parent">
  <div class="child"></div>
</div>

.parent {
  background: green;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  top: 0;
  left: 0;
  width: 300px;
  height: 100vh;
}

.child {
  background: blue;
  height: 100vh;
}

https://jsfiddle.net/m9bafsco/

Upvotes: 1

Views: 2127

Answers (1)

Nidhin Joseph
Nidhin Joseph

Reputation: 10227

Instead of height, add max-height: 100vh; to the .parent 

.parent {
  background: green;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  top: 0;
  left: 0;
  width: 300px;
  height: 100%;
  max-height: 100vh;
}

.child {
  background: blue;
  height: 100%;
}
<div class="parent">
  <div class="child">
    <p> line</p>
    <p> line</p>
    <p> line</p>
    <p> line</p>
    <p> line</p>
    <p> line</p>
    <p> line</p>
    <p> line</p>
    <p> line</p>
    <p> line</p>
    <p> line</p>
    <p> line</p>
    <p> line</p>
    <p> line</p>
    <p> line</p>
    <p> line</p>
    <p> line</p>
    <p> line</p>
    <p> line</p>
    <p> line</p>
    <p> line</p>
    <p> line</p>
  </div>
</div>

Upvotes: 1

Related Questions