我有两个div并排，现在我想要左侧容器来定义右侧的高度，这样右侧的容器可以最大化左侧的高度。因此，正确的容器应始终具有左侧容器的高度。另外，正确的标题具有固定的标题和可滚动的内容。
我也知道我可以给出正确的容器position: absolute，但我想知道是否有更现代的解决方案。
答案 0 :(得分：2)
这是你之后的事吗？这是我在评论中所说的一个例子
.container {
display: flex;
flex: 1;
align-items: stretch;
}
.left,
.right {
width: 50%;
padding: 20px;
color: white;
}
.left {
background: red;
}
.right {
background: blue;
}<div class="container">
<div class="left">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime fugit, deserunt aut officia voluptatibus, cum facere amet ex animi impedit natus! Accusamus cumque porro, reprehenderit, hic optio animi? Hic, ex! Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Dolore inventore quis amet commodi a laboriosam architecto maxime quaerat labore aliquam aperiam eos obcaecati voluptatem modi tempore quos sint, alias deserunt. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime
fugit, deserunt aut officia voluptatibus, cum facere amet ex animi impedit natus! Accusamus cumque porro, reprehenderit, hic optio animi? Hic, ex! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore inventore quis amet commodi a laboriosam
architecto maxime quaerat labore aliquam aperiam eos obcaecati voluptatem modi tempore quos sint, alias deserunt.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime fugit, deserunt aut officia voluptatibus, cum facere amet ex animi
impedit natus! Accusamus cumque porro, reprehenderit, hic optio animi? Hic, ex! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore inventore quis amet commodi a laboriosam architecto maxime quaerat labore aliquam aperiam eos obcaecati
voluptatem modi tempore quos sint, alias deserunt.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime fugit, deserunt aut officia voluptatibus, cum facere amet ex animi impedit natus! Accusamus cumque porro, reprehenderit, hic optio
animi? Hic, ex! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore inventore quis amet commodi a laboriosam architecto maxime quaerat labore aliquam aperiam eos obcaecati voluptatem modi tempore quos sint, alias deserunt.
</p>
</div>
<div class="right">
<p>less content</p>
</div>
</div>
如果这不对，那么请进一步解释，我可以看到这回答了你提出的观点。
<强> 修改
根据您的评论，请检查此代码，这应该为您提供所需的解决方案：
.container {
display: flex;
flex: 1;
align-items: stretch;
height: 100%;
}
.left,
.right {
width: 50%;
padding: 20px;
color: white;
display: flex;
}
.left {
background: red;
}
.right {
background: blue;
position: relative;
right: 0;
overflow: scroll;
position: relative;
}
.content {
height: 100%;
position: absolute;
}<div class="container">
<div class="left">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime fugit, deserunt aut officia voluptatibus, cum facere amet ex animi impedit natus! Accusamus cumque porro, reprehenderit, hic optio animi? Hic, ex! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore inventore quis amet commodi a laboriosam architecto maxime quaerat labore aliquam aperiam eos obcaecati voluptatem modi tempore quos sint, alias deserunt. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime fugit, deserunt aut officia voluptatibus, cum facere amet ex animi impedit natus! Accusamus cumque porro, reprehenderit, hic optio animi? Hic, ex! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore inventore quis amet commodi a laboriosam architecto maxime quaerat labore aliquam aperiam eos obcaecati voluptatem modi tempore quos sint, alias deserunt.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime fugit, deserunt aut officia voluptatibus, cum facere amet ex animi impedit natus! Accusamus cumque porro, reprehenderit, hic optio animi? Hic, ex! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore inventore quis amet commodi a laboriosam architecto maxime quaerat labore aliquam aperiam eos obcaecati voluptatem modi tempore quos sint, alias deserunt.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime fugit, deserunt aut officia voluptatibus, cum facere amet ex animi impedit natus! Accusamus cumque porro, reprehenderit, hic optio animi? Hic, ex! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore inventore quis amet commodi a laboriosam architecto maxime quaerat labore aliquam aperiam eos obcaecati voluptatem modi tempore quos sint, alias deserunt.
</p>
</div>
<div class="right">
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime fugit, deserunt aut officia voluptatibus, cum facere amet ex animi impedit natus! Accusamus cumque porro, reprehenderit, hic optio animi? Hic, ex! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore inventore quis amet commodi a laboriosam architecto maxime quaerat labore aliquam aperiam eos obcaecati voluptatem modi tempore quos sint, alias deserunt. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime fugit, deserunt aut officia voluptatibus, cum facere amet ex animi impedit natus! Accusamus cumque porro, reprehenderit, hic optio animi? Hic, ex! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore inventore quis amet commodi a laboriosam architecto maxime quaerat labore aliquam aperiam eos obcaecati voluptatem modi tempore quos sint, alias deserunt.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime fugit, deserunt aut officia voluptatibus, cum facere amet ex animi impedit natus! Accusamus cumque porro, reprehenderit, hic optio animi? Hic, ex! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore inventore quis amet commodi a laboriosam architecto maxime quaerat labore aliquam aperiam eos obcaecati voluptatem modi tempore quos sint, alias deserunt.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime fugit, deserunt aut officia voluptatibus, cum facere amet ex animi impedit natus! Accusamus cumque porro, reprehenderit, hic optio animi? Hic, ex! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore inventore quis amet commodi a laboriosam architecto maxime quaerat labore aliquam aperiam eos obcaecati voluptatem modi tempore quos sint, alias deserunt.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime fugit, deserunt aut officia voluptatibus, cum facere amet ex animi impedit natus! Accusamus cumque porro, reprehenderit, hic optio animi? Hic, ex! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore inventore quis amet commodi a laboriosam architecto maxime quaerat labore aliquam aperiam eos obcaecati voluptatem modi tempore quos sint, alias deserunt. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime fugit, deserunt aut officia voluptatibus, cum facere amet ex animi impedit natus! Accusamus cumque porro, reprehenderit, hic optio animi? Hic, ex! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore inventore quis amet commodi a laboriosam architecto maxime quaerat labore aliquam aperiam eos obcaecati voluptatem modi tempore quos sint, alias deserunt.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime fugit, deserunt aut officia voluptatibus, cum facere amet ex animi impedit natus! Accusamus cumque porro, reprehenderit, hic optio animi? Hic, ex! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore inventore quis amet commodi a laboriosam architecto maxime quaerat labore aliquam aperiam eos obcaecati voluptatem modi tempore quos sint, alias deserunt.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime fugit, deserunt aut officia voluptatibus, cum facere amet ex animi impedit natus! Accusamus cumque porro, reprehenderit, hic optio animi? Hic, ex! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore inventore quis amet commodi a laboriosam architecto maxime quaerat labore aliquam aperiam eos obcaecati voluptatem modi tempore quos sint, alias deserunt.
</p>
</div>
</div>
</div>