Dynamically specify height of parent based on the tallest child element? - html

Question

I am trying to best figure out how to set two columns' a-elements to 100% of the parent element, without specifying this height, but having it chosen based on the taller of the two columns. At the same time, I want to vertically align the a-element within it's column.
Current code:
<div class="post-nav group">
<div class="post-nav-prev">
<div class="post-nav-border border-reset-right">
<?php previous_post('%', '', 'yes'); ?>
</div>
</div>
<div class="post-nav-next">
<div class="post-nav-border">
<?php next_post('%', '', 'yes'); ?>
</div>
</div>
</div>
CSS:
.post-nav {
}
.post-nav-prev, .post-nav-next {
float: left;
width: 50%;
height: 100%;
}
.post-nav-prev a, .post-nav-next a {
display: flex;
justify-content: center; /* align horizontal */
align-items: center; /* align vertical */
height: 100%;
padding: 10px;
}
.post-nav-prev a {
padding-left: 25px;
}
.post-nav-next a {
padding-right: 25px;
}
.post-nav-border {
border: 1px solid #e3e3e3;
height: 100%;
}
What I eventually run into as the problem is when the two post titles isn't the same amount of lines. I originally had a specified height, but this isn't optimal for the responsive aspect of the website.
So to clarify: How would I go about having the tallest of '.post-nav-prev a', and '.post-nav-next a' specify a height for .post-nav, so the other of the two a elements also get 100% height. I've seen suggestions for display: table, but I couldn't quite get that to work, as well as keeping the vertical alignment of display: flex.
Any suggestions?

Answer 1

The simplest solution (without JS) is indeed to fiddle with the display property and set it the container to table and children to table-cell (you might as well change the actual markup to be a table, the result is the same). With this, vertically aligning becomes easy as hell and the CSS & HTML are much simpler. Here's how:
.post-nav {
display: table;
border-collapse: collapse;
}
.post-nav-prev a, .post-nav-next a {
display: block;
padding: 10px;
}
.post-nav-prev, .post-nav-next {
display: table-cell;
vertical-align: middle;
width: 50%;
height: 100%;
border: 1px solid #e3e3e3;
text-align: center;
}
<div class="post-nav group">
<div class="post-nav-prev">text 1</div>
<div class="post-nav-next">
text 2 is too long and falls in 2 lines for the example case
</div>
</div>

Answer 2

if youre open to jquery, would something like this work for you?
$(document).ready(function() {
adjust();
function adjust() {
if ($('.left a').height() > $('.right a').height()) {
$('.right a').css("min-height", $('.left a').height());
}
if ($('.right a').height() > $('.left a').height()) {
$('.left a').css("min-height", $('.right a').height());
}
}
$('.addLeft').click(function() {
$('.left a').append('<br/>Adding more');
adjust();
});
$('.addRight').click(function() {
$('.right a').append('<br/>Adding more');
adjust();
});
});
.left, .right {
display: inline-block;
width: 40%;
vertical-align: top;
}
a {
height: 100%;
display:inline-block;
}
.left a {
background-color: lightblue;
}
.right a {
background-color: lightgray;
}
.container {
background-color: gray;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Add more to Left
<br/>
Add more to Right
<br/><br/>
<div class="container">
<div class="left">
A element
</div>
<div class="right">
A element<br/>More content here
</div>
</div>