2

.mdtags{
position:fixed;
display:flex;
flex-direction:column;
height:calc(100% - 50px);
width:200px;
left:calc(50% - 150px);
top:40px;
background:lightblue;
}

.partc{
background:gold;
overflow-y:scroll;
}
<div class='mdtags'>
<div class='parta'>323</div>
<div class='partb'>525</div>
<div class='partc'>727</div>
</div>

How can I keep partc (gold color) height always to the bottom of parent?
It already has overflow-y - scroll and I want to store a larg amount of data inside, but when some data ara hidden by javascript - it should not change its height.

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
  • can you be more clear? like show us the output needed – Temani Afif May 19 '18 at 23:31
  • It's great that people are investing their time in helping you and you prefer to downvote the answers instead of working out a solution. Good luck Sir. – Dhaval Jardosh May 19 '18 at 23:31
  • @DhavalJardosh you answer was `Something like this?` so you was guessing and you were not sure, then you got 2 downvotes and you cannot be sure it's the OP, this also not helpful at all . – Temani Afif May 19 '18 at 23:33
  • @DhavalJardosh, you should test your solution before posting. –  May 19 '18 at 23:33
  • @puerto I think you are simply looking for `flex:1` to be added to the gold one – Temani Afif May 19 '18 at 23:34
  • @TemaniAfif, `flex:1` works. Place it as answer, pls. –  May 19 '18 at 23:37
  • it's already very well explained here with other alternatives https://stackoverflow.com/questions/11225912/make-div-height-occupy-parent-remaining-height ;) – Temani Afif May 19 '18 at 23:40

0 Answers0