我需要一个两列(等宽(容器，其中高度由第一列的内容决定。第二列的高度应该缩小(如果更高(或增加(如果更短(。
| first column | second column |
| unknown | ... |
| amount | ... |
| of | ... |
| content | ... |
对于用grid或flex完成的基础布局，在没有JS的情况下，高度的事情可行吗？
如果在容器上用overflow: hidden制作右列position: absolute和列background-color，则可以使右列的高度始终与左列的高度相同。
.container {
background-color: green;
position: relative;
width: 100%;
overflow: hidden;
}
.firstcolumn {
background-color: red;
width: 50%;
}
.secondcolumn {
width: 50%;
position: absolute;
right: 0;
top: 0;
}<div class="container">
<div class="firstcolumn">
<p>first column</p>
<p>unknown</p>
<p>amount</p>
<p>of</p>
<p>content</p>
</div>
<div class="secondcolumn">
<p>second column</p>
<p>unknown</p>
<p>amount</p>
<p>of</p>
<p>content</p>
<p>unknown</p>
<p>amount</p>
<p>of</p>
<p>content</p>
<p>unknown</p>
<p>amount</p>
<p>of</p>
<p>content</p>
</div>您还可以制作一个包含这两个div的大div。
在Div 1有所有的信息。Yo
将右侧列的高度设置为height:inherit；左列高度：auto；应该工作
您需要绝对定位第二列，赋予它height:100%，并将其内容包装在另一个具有oveflow: scroll的容器中。容器需要具有height: inherit或height: auto
两列都应具有明确的宽度。
示例1
.overflow-scroll {
overflow: scroll;
}
.d-flex {
display: flex;
}
.p-relative {
position: relative;
}
.p-absolute-0 {
position: absolute;
right: 0;
top: 0;
}
.h-100 {
height: 100%;
}
.w-50 {
width: 50%;
}
.bg-red {
background: red;
}
.bg-blue {
background: blue;
}<div class="d-flex p-relative">
<div class="bg-red w-50">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque modi enim aut repudiandae id blanditiis tempore cupiditate eius veritatis rerum veniam minus laborum, hic nihil similique illo temporibus consequatur adipisci? Lorem ipsum dolor sit amet
consectetur adipisicing elit. Consequatur minima et quod cumque inventore itaque earum saepe, ea amet rem labore! Sapiente unde tempora dolor illo magnam qui consectetur culpa!
</div>
<div class="w-50 p-absolute-0 h-100 bg-blue">
<div class="overflow-scroll h-100">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Esse doloribus porro, architecto aspernatur dolor labore saepe molestiae amet dignissimos voluptates perspiciatis molestias placeat totam repellat enim quas quia tempora neque. Similique cupiditate
facere corrupti id velit dolores doloribus aliquid nulla distinctio earum eaque dolorem iure, aperiam molestias excepturi veniam vero dignissimos! Corporis voluptatum culpa beatae rem iste quos repudiandae nisi! Enim ratione eius accusantium a.
Iusto labore fugit natus quisquam ipsum sapiente aut, blanditiis autem voluptas ducimus ratione accusantium reprehenderit nam alias praesentium voluptatibus placeat modi enim distinctio illum consequuntur! In itaque error temporibus, provident veniam
voluptas dolorem voluptates maiores illo tenetur alias assumenda, sed quae facere nam adipisci numquam repudiandae culpa, dignissimos quos hic minus. Doloribus et possimus vitae? Quas, quaerat suscipit ad sequi omnis laudantium sapiente deserunt,
rem eligendi, nisi quae debitis enim veritatis necessitatibus molestiae ratione magnam officia! Excepturi aut quisquam atque, eius voluptate quas. Alias, laborum?
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Esse doloribus porro, architecto aspernatur dolor labore saepe molestiae amet dignissimos voluptates perspiciatis molestias placeat totam repellat enim quas quia tempora neque. Similique cupiditate
facere corrupti id velit dolores doloribus aliquid nulla distinctio earum eaque dolorem iure, aperiam molestias excepturi veniam vero dignissimos! Corporis voluptatum culpa beatae rem iste quos repudiandae nisi! Enim ratione eius accusantium a.
Iusto labore fugit natus quisquam ipsum sapiente aut, blanditiis autem voluptas ducimus ratione accusantium reprehenderit nam alias praesentium voluptatibus placeat modi enim distinctio illum consequuntur! In itaque error temporibus, provident veniam
voluptas dolorem voluptates maiores illo tenetur alias assumenda, sed quae facere nam adipisci numquam repudiandae culpa, dignissimos quos hic minus. Doloribus et possimus vitae? Quas, quaerat suscipit ad sequi omnis laudantium sapiente deserunt,
rem eligendi, nisi quae debitis enim veritatis necessitatibus molestiae ratione magnam officia! Excepturi aut quisquam atque, eius voluptate quas. Alias, laborum?
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Esse doloribus porro, architecto aspernatur dolor labore saepe molestiae amet dignissimos voluptates perspiciatis molestias placeat totam repellat enim quas quia tempora neque. Similique cupiditate
facere corrupti id velit dolores doloribus aliquid nulla distinctio earum eaque dolorem iure, aperiam molestias excepturi veniam vero dignissimos! Corporis voluptatum culpa beatae rem iste quos repudiandae nisi! Enim ratione eius accusantium a.
Iusto labore fugit natus quisquam ipsum sapiente aut, blanditiis autem voluptas ducimus ratione accusantium reprehenderit nam alias praesentium voluptatibus placeat modi enim distinctio illum consequuntur! In itaque error temporibus, provident veniam
voluptas dolorem voluptates maiores illo tenetur alias assumenda, sed quae facere nam adipisci numquam repudiandae culpa, dignissimos quos hic minus. Doloribus et possimus vitae? Quas, quaerat suscipit ad sequi omnis laudantium sapiente deserunt,
rem eligendi, nisi quae debitis enim veritatis necessitatibus molestiae ratione magnam officia! Excepturi aut quisquam atque, eius voluptate quas. Alias, laborum?
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Esse doloribus porro, architecto aspernatur dolor labore saepe molestiae amet dignissimos voluptates perspiciatis molestias placeat totam repellat enim quas quia tempora neque. Similique cupiditate
facere corrupti id velit dolores doloribus aliquid nulla distinctio earum eaque dolorem iure, aperiam molestias excepturi veniam vero dignissimos! Corporis voluptatum culpa beatae rem iste quos repudiandae nisi! Enim ratione eius accusantium a.
Iusto labore fugit natus quisquam ipsum sapiente aut, blanditiis autem voluptas ducimus ratione accusantium reprehenderit nam alias praesentium voluptatibus placeat modi enim distinctio illum consequuntur! In itaque error temporibus, provident veniam
voluptas dolorem voluptates maiores illo tenetur alias assumenda, sed quae facere nam adipisci numquam repudiandae culpa, dignissimos quos hic minus. Doloribus et possimus vitae? Quas, quaerat suscipit ad sequi omnis laudantium sapiente deserunt,
rem eligendi, nisi quae debitis enim veritatis necessitatibus molestiae ratione magnam officia! Excepturi aut quisquam atque, eius voluptate quas. Alias, laborum?
</div>
</div>
</div>示例2
.overflow-scroll {
overflow: scroll;
}
.d-flex {
display: flex;
}
.p-relative {
position: relative;
}
.p-absolute-0 {
position: absolute;
right: 0;
top: 0;
}
.h-100 {
height: 100%;
}
.w-50 {
width: 50%;
}
.bg-red {
background: red;
}
.bg-blue {
background: blue;
}<div class="d-flex p-relative">
<div class="bg-red w-50">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deserunt quia asperiores quidem nostrum id, nemo quis consectetur neque maiores, numquam temporibus? Autem, aliquid? Nemo ullam debitis placeat aperiam, voluptate distinctio! Incidunt, perspiciatis
tempore nostrum, laboriosam facere ut exercitationem sapiente eligendi, velit veritatis numquam illum doloribus perferendis quas odio rerum eum. Recusandae officia tempore sed non excepturi quam sint minima ex. Assumenda fuga laborum ipsa perferendis
ducimus quisquam harum et animi minus eius. Saepe ea mollitia facilis soluta! At doloribus accusantium sapiente rerum illum veritatis, quam eveniet iusto eius, quis tempora. Aperiam provident neque molestias saepe? Non quaerat quas nam earum, atque
aperiam consectetur numquam tenetur, eius ducimus corrupti voluptatibus ad harum itaque obcaecati recusandae porro enim pariatur facere, labore cupiditate. Quod magni laborum, modi animi a nulla sit ea fugiat explicabo provident deserunt aliquid veniam
odit quaerat maxime officia tempora earum enim. Voluptates officiis aliquam dolorum sunt laudantium cum earum?
</div>
<div class="w-50 p-absolute-0 h-100 bg-blue">
<div class="overflow-scroll h-100">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Esse doloribus porro, architecto aspernatur dolor labore saepe molestiae amet dignissimos voluptates perspiciatis molestias placeat totam repellat enim quas quia tempora neque. Similique cupiditate
</div>
</div>
</div>