css - 并排制作两个 div，一个可调整大小，另一个具有相同高度

Question

我在这里带来了一个具有 CSS 高度的戏剧。

我想制作一个布局，一个在同一行中包含 2 个 div 的 div，一个可调整大小，另一个必须适合父级的高度（与第一个高度相同）。

第一个 div 可以有额外的信息（所以我不能固定高度），所以它会有更多的行，重要的是它不能有滚动条。第二个 div 必须服从第一个高度，如果它大于它将有一个滚动条。

<div class='container'> <!-- parent -->
    <div class='left'> <!-- resizable -->
    </div>
    <div class='right'> <!-- same height as left div  -->
    </div>
</div>

未解决的代码

问题是我无法弄清楚如何仅使用 css 来制作它。甚至可以仅使用 css。我不想用js。

有人请帮助我！

Answer 1

小提琴

你要做的是做一个正确的absolutely positioned，阻止它的高度影响父母的。

相关的 CSS

.container {
    background-color: gray;
    display: table;
    width: 70%;
    position:relative;
}

.container .left{
    background-color: tomato;
    width: 35%;
}

.container .right{
    position:absolute;
    top:0px;
    left:35%;
    background-color: orange;
    width: 65%;
    height:100%;
    overflow-y: auto;
}