Html 元素控制其 parent 或同级元素的高度

Question

我正在尝试创建一个 two-column 布局以自动适应浏览器 window 宽度。其中一列包含动态内容，可以很短，也可以很长。另一列始终具有始终相同的文本：

<!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/

我想让滚动条出现在 .left div 中，只要其内容的高度大于 .right div 的内容高度].当 .left div 中的文本量较小时， .right 文本仍应显示而没有滚动条（这已被 flex 覆盖，但不要求使用 flex）：

显而易见的“解决方案”是将 .left 元素的 max-height 指定为“合理”的值，但我需要它针对不同的屏幕宽度自动调整。

是否可以这样做（没有javascript）或者我注定要为块指定固定高度？

Answer 1

有 no way to affect a parent in css (there is a sibling selector，虽然我看不出它在这种情况下有什么用），但这将是一种做你想做的事情的方法，让 .right div确定容器的高度和.left适应它的：

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>

Html 元素控制其 parent 或同级元素的高度

Html element controlling height of its parent or sibling

html

css

layout