如何动态地调整存在于彼此顶部的两个div的大小，以便它们在一个增长时保持相同的高度

Question

我有两个div垂直显示在彼此的顶部。两个div都扩展100%的宽度。我正在寻找一种方法，底部div的高度由存在于它内部的内容来确定，以及顶部div的高度来动态调整自身的大小，使其高度与底部div的高度相同。

顶部div有少量文本，底部div有大量文本。显然，随着屏幕尺寸的缩小和文本包装，div变长了。例如，随着屏幕尺寸缩小，带有大量文本的底部div比顶部div长，顶部div的大小应该增加。

我知道这样的事情可以通过javascript通过事件监听器或类似的东西动态设置div的高度来完成，但我正在寻找一种可以用html和css完成的方法。

我尝试过flex生长和实验基于百分比的高度，但都没有效果。我将非常感谢任何人可能有任何见解!

.container {
display: flex;
flex-direction: column;
}
.b1 {
background-color: red;
height: 50%;
}
.b2 {
background-color: orange;
height: 50%;
}
.box {
flex-grow: 1;
}

<div class="container">
<div class="box b1">One</div>
<div class="box b2">
DIV B Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>

Answer 1

这里只有CSS示例:答案帮助:Michael Benjamin

.container {
display: grid;
grid-template-rows: 1fr 1fr;
margin-bottom: 25px;
}

.container {
display: grid;
grid-template-rows: 1fr 1fr;
margin-bottom: 25px;
}
.b1 {
background-color: red;
}
.b2 {
background-color: orange;
}
body {
margin: 0
}

<div class="container">
<div class="box b1">One</div>
<div class="box b2">
DIV B Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centecently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>
<div class="container">
<div class="box b1">One</div>
<div class="box b2">
DIV B Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centecently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centecently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>

And是一个Javascript代码片段，可以实现您想要的结果:

const container = document.querySelector('.container');
const b1 = document.querySelector('.b1');
const b2 = document.querySelector('.b2');
function setHeight() {
const b2Height = b2.offsetHeight;
b1.style.height = `${b2Height}px`;
}
window.addEventListener('resize', setHeight);
setHeight();

现场演示:

const container = document.querySelector('.container');
const b1 = document.querySelector('.b1');
const b2 = document.querySelector('.b2');
function setHeight() {
const b2Height = b2.offsetHeight;
b1.style.height = `${b2Height}px`;
}
window.addEventListener('resize', setHeight);
setHeight();

.container {
display: flex;
flex-direction: column;
}
.b1 {
background-color: red;
height: 50%;
}
.b2 {
background-color: orange;
height: 50%;
}
.box {
flex-grow: 1;
}

<div class="container">
<div class="box b1">One</div>
<div class="box b2">
DIV B Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy text ever since
the 1500s, when an unknown printer took a galley of type and scrambled it to
make a type specimen book. It has survived not only five centuries, but also
the leap into electronic typesetting, remaining essentially unchanged. It
was popularised in the 1960s with the release of Letraset sheets containing
Lorem Ipsum passages, and more recently with desktop publishing software
like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>