I have an outer div that contains three inner divs.
I want the leftmost inner div to always determine the height of the outer div. If the other inner divs have less content [than the leftmost div], they will have empty space. If they have more content [than the leftmost div], they will get a scrollbar.
Some other questions on SO ask how to set the height of an outer div tothe height of an inner div. However, in my case, I have multiple inner divs, and I don't know if the height of the outer div is greater or less than the height of the leftmost div.
Is there any way to do this, specifically using only CSS?
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
different way. Two examples:
.outer_div { position: relative; overflow: hidden; max-width: 300px; margin: 0 auto; } .inner_div { width: 33.33%; } .inner_div_1 { float: left; background: khaki; } .inner_div_2, .inner_div_3 { background: darkkhaki; position: absolute; top: 0; height: 100%; overflow-y: auto; } .inner_div_2 { left: 33.33%; } .inner_div_3 { left: 66.66%; }.outer_div { display: flex; flex-direction: row; max-width: 300px; margin: 0 auto; background : gray; } .inner_div { width: 33.33%; } .inner_div > div { position: relative; height: 100%; } .inner_div_1 span { background: khaki; } .inner_div_2 span, .inner_div_3 span { background: darkkhaki; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow-y: auto; overflow-x: hidden; }One idea is to use absolute positioning to separate some content from the flow so it doesn't have any effect on the height, and then use Flexbox as the main layout:
.container { display: flex; border: 1px solid; padding: 5px; box-sizing: border-box; } .container>div { flex: 1; margin: 5px; border: 1px solid; box-sizing: border-box; } div.inner { border-color:red; } .inner-alt { position: relative; overflow: auto; } .inner-alt>div { position: absolute; top: 0; right: 0; left: 0; bottom: 0; }