Html元素控制其父或兄弟的高度[重复]答案

【问题标题】：Html element controlling height of its parent or sibling [duplicate]Html元素控制其父或兄弟的高度[重复]
【发布时间】：2021-01-20 22:22:54
【问题描述】：

我正在尝试创建一个自动调整到浏览器窗口宽度的两列布局。其中一列包含可以很短但也可以很长的动态内容。另一列的文本始终相同：

<!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 元素的最大高度指定为“合理”的值，但我需要它针对不同的屏幕宽度自动调整。

是否可以（不使用javascript）或者我注定要为块指定固定高度？

【问题讨论】：

标签： html css layout

【解决方案1】：

有no way to affect a parent in css（有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>

【讨论】：

是的，刚刚来自another answer，它使用了类似的技术。在接受其他建议之前，我会稍等片刻，但看起来还不错。
对了！我会说你应该把它作为重复的，但也许这个，作为一个更简单的例子，对某人仍然有用