Html element controlling height of its parent or sibling

Question

I am trying to create a two-column layout that adjusts to the browser window width automatically. One of the columns contains a dynamic content that can be short, but can be long, too. The other column always has text that is always the same:

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            .container {
                display: flex;
            }
            .left {
                flex: 1;
                background-color: cornflowerblue;
                overflow-y: auto;
            }
            .right {
                background-color: aquamarine;
                flex: 1;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="left">
Potentially<br>long<br>content<br>that<br>might<br>need<br>a<br>scrollbar<br>1<br>2<br>3<br>4<br>5 Fusce pulvinar sit amet massa in vulputate. Cras eros ligula, condimentum non lacus nec, maximus lacinia orci.
            </div>
            <div class="right">
                <p>The text that<br>does not change<br>and must always<br>be displayed<br>in its entirety<br>without scrollbar.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam euismod nibh ex, sit amet vulputate ipsum luctus non.</p>
            </div>
        </div>
    </body>
</html>

https://jsfiddle.net/w3Lhjza1/1/

I want to make a scrollbar to appear in the .left div whenever the height of its content is greater than the height of the content of the .right div. When the amount of text in the .left div is small, .right text should still be displayed without scroll bars (this is covered by flex already, but using flex is not a requirement):

The obvious "solution" is to specify the max-height of the .left element to something "reasonable", but I need it to adjust automatically for different screen widths.

Is it possible to do (without javascript) or I am doomed to specifying fixed height for blocks?

alotropico · Answer 1 · 2020-10-06T04:07:03.233

There is no way to affect a parent in css (there is a sibling selector, although I don't see how would it be useful in this case), but this would be a way to do what you want, letting the .right div to determine the height of the container and the .left one adapting to it:

body {
  margin: 0;
  overflow: hidden;
}
.container {
  position: relative;
}
.container > * {
  padding: .2rem;
}
.container p {
  margin: 0;
}
.left {
  background-color: cornflowerblue;
  position: absolute;
  overflow-y: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 50%;
}
.right {
  position: relative;
  background-color: aquamarine;
  left: 50%;
}

<div class="container">
  <div class="left">
    Potentially<br>long<br>content<br>that<br>might<br>need<br>a<br>scrollbar<br>1<br>2<br>3<br>4<br>5 Fusce pulvinar sit amet massa in vulputate. Cras eros ligula, condimentum non lacus nec, maximus lacinia orci. Potentially<br>long<br>content<br>that<br>might<br>need<br>a<br>scrollbar<br>1<br>2<br>3<br>4<br>5 Fusce pulvinar sit amet massa in vulputate. Cras eros ligula, condimentum non lacus nec, maximus lacinia orci. Potentially<br>long<br>content<br>that<br>might<br>need<br>a<br>scrollbar<br>1<br>2<br>3<br>4<br>5 Fusce pulvinar sit amet massa in vulputate. Cras eros ligula, condimentum non lacus nec, maximus lacinia orci. Potentially<br>long<br>content<br>that<br>might<br>need<br>a<br>scrollbar<br>1<br>2<br>3<br>4<br>5 Fusce pulvinar sit amet massa in vulputate. Cras eros ligula, condimentum non lacus nec, maximus lacinia orci.
  </div>
  <div class="right">
    <p>The text that<br>does not change<br>and must always<br>be displayed<br>in its entirety<br>without scrollbar.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam euismod nibh ex, sit amet vulputate ipsum luctus non.</p>
  </div>
</div>

Yup, just came by [another answer](https://stackoverflow.com/a/43352777/31782) that uses similar technique. I'll wait a bit before accepting for other suggestions, but it looks pretty good. — n0rd, Oct 06 '20 at 04:06
Damn right! I'd say you should put that as duplicate but maybe this, being a simpler case, would still be useful for someone — alotropico, Oct 06 '20 at 04:09

Html element controlling height of its parent or sibling

1 Answers1