CSS 2 columns, first define the max height of the second one, that will use scroll if needed

Question

I would like to have a two columns layout where the first column can grown as high as necessary and the second column will be 100% the height of the first one, but if the first one is not higher enough to show all the content of the second column, then this one should show scrolling bar and be limited to the height of the first column.

I tried this but this only works if I set a fix height for the main container instead of a percentage.

HTML:

<div class="container">
    <div class="column1">Phasellus viverra ac diam nec viverra. Phasellus viverra ac diam nec viverra.</div>
    <div class="column2">Phasellus viverra ac diam nec viverra. Aliquam gravida ante at est laoreet pulvinar. Vestibulum scelerisque ut quam nec semper. Duis porta aliquam velit in porttitor.</div>
</div>

CSS:

.container {
    height: 150px;
}
.column1, .column2 {
    float: left;
    width: 50%;
}
.column2 {
    color: red;
    overflow: auto;
    height: 100%;    
}

https://jsfiddle.net/r4hdcwy2/

Many thanks for your suggestions!

Answer 1

What you need to do is make 2nd column's position absolute, so its height is relative to parent's.

If the 1st column's height grows, 2nd column will follow accordingly. If the 1st column's height is shorter than 2nd column's, 2nd column will keep parent div's height, which is 150px by default.

Here is a working example:

.container {
    height: 150px;
    position:relative;
    display: table;
}
.column1, .column2 {
    float: left;
    width: 50%;
}
.column2 {
    color: red;
    overflow: auto;
    position:absolute;
    height:100%;
    right: 0;
}

<div class="container">
    <div class="column1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vehicula nisi lobortisctetur adipiscing elit. Suspendisse vehicula nisi lobortisod urna, eget placerat nulla. D purus sed ultrices viverra. Sed tincidunLorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vehicula nisi lobortisctetur adipiscing elit. Suspendisse vehicula nisi lobortisod urna, eget placerat nulla. D purus sed ultrices viverra. Sed tincidunt euismod urna, eget placerat nulla. Donec consequat facilisis venenatisLorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vehicula nisi lobortisctetur adipiscing elit. Suspendisse vehicula nisi lobortisod urna, eget placerat nulla. D purus sed ultrices viverra. Sed tincidunt euismod urna, eget placerat nulla. Donec consequat facilisis venenatisLorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vehicula nisi lobortisctetur adipiscing elit. Suspendisse vehicula nisi lobortisod urna, eget placerat nulla. D purus sed ultrices viverra. Sed tincidunt euismod urna, eget placerat nulla. Donec consequat facilisis venenatist euismod urna, eget placerat nulla. Donec consequat facilisis venenatis. </div>
    <div class="column2">Phasellus viverra ac diam nec viverra. Aliquam gravida ante at est laoreet pulvinar. Vestibulum scelerisque ut quam nec semper. Duis porta aliquam velit in porttitor. Phasellus lacinia rutrum volutpat. Sed aliquam blandit velit, vitae lacinia risus imperdiet quis. Curabitur eu tincidunt risus. Sed nec nulla neque. Donec porta tellus lectus, sit amet interdum mi porttitor eget. Vivamus ac ullamcorper ante. Pellentesque consequat, arcu vitae lacinia aliquam, lectus eros fringilla ex, sit amet varius felis elit eget nulla. Maecenas egestas eleifend purus, a cursus lorem tempor quis. Integer sit amet lectus lobortis, iaculis arcu nec, sodales massa. Nullam metus urna, sollicitudin non pharetra quis, hendrerit vel sapien. Donec quis lectus lobortis, egestas quam lobortis, cursus ante. </div>
</div>