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

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:

function addContent() {
  let div = document.getElementById("insert");
  div.innerHTML += "<div class=\"content\">New content</div>";
}

#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>