I am doubtful that this scenario can be achieved, but I am optimistic that someone will present a solution to prove me wrong.
My parent element does not have a fixed height (though it could, although I don't believe it would help). Within this parent element, there are two children stacked vertically. The height of the first child is unknown, and I want the second child to occupy the remaining space.
Here is the HTML structure:
<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 - may consist of one or two lines</div>
<div class="snippet-text">Remaining text filling the available space.</div>
</div>
</a>
</div>
CSS rules applied:
* {
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;
}
I have reviewed numerous similar posts on this topic. Most solutions discussed pertain to child divs in a horizontal layout. The closest approach I found involves setting the height of the first child, but it is not ideal.
I am considering whether a table-layout technique could offer a solution...
Update: Since it is now 2018 and CSS3 support is widespread, the recommended solution for such a scenario is using flexbox. Refer to the second part of Ktash's answer below for details.