Stretch div inside a div vertically

Question

I am trying to create the box where the content would always take the 100% height to the bottom(minus the padding), even if it is resized and has small content. I got stuck with ideas… grateful for all suggestions!

Here's a pen as well: https://codepen.io/Dalmat/pen/VOmxzm

.box {
  background: lightblue;
  width: 200px;
  min-height: 100px;
  padding: 10px;
  text-align: center;
  overflow: auto;
  resize: both;
}

.box_bottom {
  background: darkblue;
  color: white;
}

<div class="box">
  <div class="box_top">
    Title
  </div>
  <div class="box_bottom">
    Content
  </div>
</div>

Have you tried `height: 100%;` for `.box_bottom`? By my understanding, percentages in CSS are relative to the enclosing element and so setting it to that would be putting it as big as it possibly could be — Green Cloak Guy, May 14 '19 at 11:52
Did you try flexBox ? Flex elements are expanding until they can't anymore — Fakebounce, May 14 '19 at 11:53
@GreenCloakGuy Yeah, even with 100% on the body and html it does not seem to work... — Smithy, May 14 '19 at 11:53

score 1 · Accepted Answer · answered May 14 '19 at 11:54

Flexbox is quite handy for stuff like this. A great article to read is the complete guide to flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

.box {
  background: lightblue;
  width: 200px;
  height: 100px;
  padding: 10px;
  text-align: center;
  
  display: flex;
  flex-direction: column;
  justify-content: stretch;
}

.box_bottom {
  background: darkblue;
  color: white;
  height: 100%;
}

<div class="box">
  <div class="box_top">
    Title
  </div>
  <div class="box_bottom">
    Content
  </div>
</div>

score 1 · Answer 2 · answered May 14 '19 at 11:55

added min height to box_bottom

.box {
  background: lightblue;
  width: 200px;
  min-height: 100px;
  padding: 10px;
  text-align: center;
  overflow: auto;
  resize: both;
}

.box_bottom {
  background: darkblue;
  color: white;
  min-height: 80px
}

<div class="box">
  <div class="box_top">
    Title
  </div>
  <div class="box_bottom">
    Content
  </div>
</div>

Stretch div inside a div vertically

2 Answers2