Set a div's height to a percentage of sibling div

Question

I have three sibling divs in a row:

Right div: A div that has height determined by its text content.

Center div: A div that should match the height of the Right div.

Left div: A div that I want to set at 50% height of the Right div.

CSS attempt using flexbox with Left div not working:

.container {
    display: flex;
}
.left {
    width: 50px;
    height: 50%;
    background-color: lightcyan;
}
.center {
    width: 50px;
    background-color: lightcoral;
}
.right {
    width: 300px;
    background-color: palegreen;
}

The only way I have discovered to allow the Left div to calculate a percentage of the Right div's height is to use position: absolute, like in this answer.

Absolute positioning is less than ideal, because it prevents me from using normal layout flow to set the three divs next to each other in a row.

Is there any way I can set the Left div to a percentage of the Right div's height, without needing to use a fixed horizontal layout to set the three divs in a row?

The layout only needs to work in recent Chrome, so browser incompatibilities are not an issue. I am open to solutions using flexbox or table layout.

Unless you put them within a containing element and set the height on that, then there is no way to do this using only CSS. — TylerH, Nov 04 '14 at 18:25
I know you have posted a link to an answer, that includes this as a workaround: http://jsfiddle.net/h7gc12wb/5/ but you wrote also `"Absolute positioning is less than ideal, because it prevents me from using normal layout flow to set the three divs next to each other"`. When you use `position: absolute;` on a child of `.left` you won't have this problem. — Nico O, Nov 04 '14 at 18:41

score 2 · Accepted Answer · answered Nov 04 '14 at 18:42

I don't know what restrictions you have on your HTML structure. But a simple way to do what you want is to set the left div as an equal height table-cell div, and inside it, an inner div with 50% height. It will not affect the elements flow:

Updated JsFiddle

.container {
    display: table;
}

.left {
    display: table-cell;
    position: relative;
    width: 50px;
}

.left > div {
    background-color: lightcyan;
    height: 50%;
    width: 100%;
    position: absolute;
}

.center {
    display: table-cell;
    width: 50px;
    background-color: lightcoral;
}
.right {
    display: table-cell;
    width: 300px;
    background-color: palegreen;
}

<div class="container">
    <div class="left">
        <div></div>
    </div>
    <div class="center"></div>
    <div class="right">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum porttitor vitae ante quis suscipit.
    </div>
</div>

Set a div's height to a percentage of sibling div

1 Answers1