Make div fill rest of parent and grow with content

var content = document.getElementById("content");

var addContent = function() {
  content.innerHTML += " The quick brown fox jumps over the lazy dog"
}
.parent {
  background-color: #f3f3f3;
  display: flex;
  flex-direction: column;
  padding: 16px;
}

.content {
  background-color: #f3aaf3;
  min-height: 50px;
  overflow: auto;
}

.btn {
  bottom: 16px;
  margin-top: 32px;
  padding: 8px;
}
<div class="parent">
  <div id="content" class="content">
    The quick brown fox jumps over the lazy dog
  </div>
  <button class="btn" onclick="addContent()">Add content</button>
</div>

Updated the snippet:

enter image description here

Updated again, now it will grow with the content with the button staying at the bottom:

enter image description here

CLICK HERE to find out more related problems solutions.

Leave a Comment

Your email address will not be published.

Scroll to Top