达到父级最大高度时的可滚​​动子级

Question

My problem is quite similar to this one but the difference I can see is that my parent div ( #container ) have a min-height and a max-height (no height as it should grow with its content), but the scrollable div ( #dynamic-part ) does not know its height nor max-height either. It should be scrollable when its parent has reached its max-height .

Is that something possible with pure CSS ?

HTML

<div id="container">
  <div id="fixed-part">
  This will always be 60px big
  </div>
  <div id="dynamic-part">
    This can grow and so should be scrollable<br><br>
    <a href="#" onclick="addContent()">Add content</a><br><br>
    <div id="insert">
    </div>
  </div>
</div>

CSS

#container {
  min-height: 100px;
  max-height: 300px;
  border: solid 1px black;
  width: 200px;
  padding: 0 5px;
}

#fixed-part {
  width: 100%;
  height: 60px;
  border: solid 1px pink;
}

#dynamic-part {
  width: 100%;
  max-height: calc(100% - 60px);
  border: solid 1px blue;
}

Here is a fiddle to help: https://jsfiddle.net/bz0b4ydz/

Answer 1

If you use the flexbox model, then this is easy:

 var count = 1;//demo purpose function addContent() { let div = document.getElementById("insert"); divChild = document.createElement('div'); divChild.setAttribute('class', 'content'); divChild.innerHTML = 'New content ' + count; div.insertBefore(divChild, div.firstChild);// prepend new div count++ // demo update count }

 #container { display: flex; flex-flow: column; min-height: 100px; max-height: 300px; border: solid 1px black; width: 200px; padding: 0 5px; } #fixed-part { flex-shrink: 0; /* or no height set but the full flex set : flex:1 0 60px;*/ height: 60px; /* can be avoid, see previous comment */ border: solid 1px pink; } #dynamic-part { flex: 1; border: solid 1px blue; overflow: auto; } .content { background-color: grey; width: 100%; height: 50px; margin: 5px auto; }

 <div id="container"> <div id="fixed-part"> This will always be 60px big </div> <div id="dynamic-part"> This can grow and so should be scrollable<br><br> <a href="#" onclick="addContent()">Add content</a><br><br> <div id="insert"> </div> </div> </div>

Answer 2

You need a condition in your case :

 If( maxHeightReached ){ scrollable(); }

In that case, you could use javascript to keep track of an element's height. But it's not easy to come up with a code here because it really depends on what you're trying to do.

Hope it helps.