CODEWITHSUNDEEP
htmlcss
Robolisk
Robolisk

Reputation: 1792

child container still go outside of parent 100vh

This is sort of a two in problem.

I have a body with height: 100vh similar to how my example is in the jsFiddle (except in there I put 20vh.

I have a similar structure as this, where the innerRight container can be quite large compared to the rest of the content, and only that conatiner is to obtain it's own scroll bar. I sort of got this working in my main project, but the outer container (similar to how I displayed outer in the example) still expands past the the parents height container main. Be it 100vh, or 20vh it doesn't matter it doesn't stay within with display:flex.

.main {
  height: 20vh;
}

.outer {
  display: flex;
  overflow: hidden;
}

.innerLeft {
  height: 200px;
  width: 50px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  background-color: green;
}

.innerRight {
  overflow: auto;
  height: 500px;
  background-color: red;
  width: 100%;
}
<div class="main">
  <div class="header">
    some random text
  </div>
  <div class="outer">
    <div class="innerLeft">
    </div>
    <div class="innerRight">
    </div>
  </div>
</div>

Upvotes: 2

Views: 758

Answers (2)

Yudiz Solutions
Yudiz Solutions

Reputation: 4459

Can you please check the below code? Hope it will work for you.

  1. You have to set height:100vh; in .main and set width:calc(100% - 50px); to .innerRight.
  2. Remove height from innerleft and innerright element.

Please refer to this link: https://jsfiddle.net/yudizsolutions/9Lsyzg64/1/

body {
  margin: 0;
}

.main {
  height: 100vh;

}

.outer {
  display: flex;
  height: calc(100vh - 19px);
  overflow: hidden;
}

.innerLeft {
  width: 50px;
  background-color: green;
}

.innerRight {
  overflow: auto;
  background-color: red;
  width: calc(100% - 50px);
}
<div class="main">
  <div class="header">
    some random text
  </div>
  <div class="outer">
    <div class="innerLeft">
    </div>
    <div class="innerRight">
    </div>
  </div>
</div>

Upvotes: 2

shutupchigo
shutupchigo

Reputation: 709

You need to set height to outer class.

.main {
  height: 20vh;

}
.outer {
  display: flex;
  height: 200px;
  overflow:hidden;
  
}

.innerLeft {
  width: 50px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  background-color: green;
}

.innerRight {
  overflow: auto;
  height: 500px;
  background-color: red;
  width:100%;
}
<div class="main">
  <div class="header">
  some random text
  </div>
  <div class="outer">
    <div class="innerLeft">
    </div>
    <div class="innerRight">
    </div>
  </div>
</div>

Upvotes: 0

Related Questions