Two vertical child elements need to fit 100% height of parent, both dynamic heights

Question

I have a feeling that this might not be possible, but I'm hoping someone will prove me wrong.

I have a parent element of a non-fixed height (although it could be, I don't think it helps). Within it are two children, stacked vertically. The height of the first item is unknowable. I'd like the second item to take up the remaining height.

HTML:

<div class="container">
  <a class="snippet" href="#">
    <img class="example-image" src="example-image.png">
    <div class="snippet-text-section">
      <div class="snippet-title">Title for the item - could be one or two lines long</div>
      <div class="snippet-text">Rest of the text, filling the remaining space.</div>
    </div>
  </a>
</div>

CSS:

* {
    padding: 0;
    margin: 0;
}

.container{
    position:relative;
}

.snippet {
    display: block;
    border-radius: 5px;
    background-color: #ddd;
    color:black;
    overflow:hidden;
}

img {
    max-width: 100%;
    vertical-align: middle;
    display: inline-block;
    height:100px;

}

.example-image {
    width: 100%;
    background-color: #111;
}

.date {
    position: absolute;
    top: -20px;
    background-color: #1b1f52;
    font-weight: bold;
    padding:0px 2px;
    color: white;
}

.snippet-text-section {
    padding: 0px 20px 20px 0px;
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
}

.snippet-title {
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 700;
    background-color: rgba(255,0,0,0.8);
    color: white;
    padding: 0 5px;
    border-radius: 0px 5px 0px 0px;
}

.snippet-text {
    font-size: 20px;
    line-height: 25px;
    background-color: rgba(0,0,255,0.8);
    color: white;
    height: 100%;
    padding: 0 5px;
    border-radius: 0px 0px 5px 5px;
}

Please note I've looked at a lot of posts on here. Most similar ones deal with the child divs having a horizontal layout. The closest I've come to a solution (and what I'm currently using) is Two vertical divs within a 100% height div where I'm forcing the height of the first child, but it's not ideal.

I'm currently wondering if there's a table-layout solution I've missed...

Update It's 2018 and CSS3 support is everywhere. If you're looking for a solution to this, the answer is flexbox. See the second part of Ktash's answer below.

So.. you *don't* want to set a height to the first child, but you still want the second one to take up the remaining space? How do you know how much remaining space there is if you don't know the height o the first child? — Josh Crozier, Oct 02 '13 at 15:15
@JoshC In this case, I have a box of e.g. 100px which I don't want overflow. That box has two elements: a title and a description. What I can't guarantee is whether the title will be one or two lines of text, hence I don't know its height. — jymbob, Jan 27 '14 at 15:09

score 3 · Accepted Answer · answered Oct 02 '13 at 15:34

So, there are a few tricks to get this appearance. The simple way is to set overflow: hidden on the .snippet-text-section class. That will just hide any content hanging over the edge. But, that will hide any content hanging over the edge, so it is a double-edge sword.

The bleeding edge forward looking way to do it is via the flexbox property. For this, the code would look like:

.snippet-text-section {
    display: flex;
    flex-direction: column;
}
.snippet-text {
    flex: 1 1 auto;
}

Live demo. Limited support on this, but much better for the future. You could do a feature support check via modernizr (or on your own) and then fallback to overflow: hidden;, or another method, if the browser doesn't support it.

Two vertical child elements need to fit 100% height of parent, both dynamic heights

1 Answers1