Flex div is growing beyond parent div based on child height-CodePudding

I have created following html element.

Here remaining-height class is supposed to be remaining height of container-div which is 100 - 15 = 85px, but because grand-child-div is 200 px, remaining-height div is going beyond container-div.

How can I prevent remaining-height div to be remaining height of container-div which is 100 - 15 = 85px.

Based on comment I am adding one detail. remaining-height will have scroll inside that div as grand-child-div will have more height than remaining-height.

<div  style="height:100px">
  <div >
  </div>
  <div >
    <div>
      <div  style="height:200px">  
      </div>
    </div>
  </div>
</div>

Following is css

.remaining-height {
    flex: 1 1 auto;
    display: flex;
    flex-flow: column;
    background-color: yellow;
}

.fixed-height {
  height: 15px;
  background-color: green;  
}

https://jsfiddle.net/6cg8kmqh/

CodePudding user response：

As worked out in the comments, what you want to do is control the overflow. You can add overflow: auto to .remaining-height to allow it to scroll (once flex is setup correctly). See jsfiddle.net/4bLfvcxu.

CodePudding user response：

Try to add to the element with the class: remaining-height, height: calc(100% - 15px);