将另一个子项的最大高度设置为子项

Question

我有包装容器和两个子元素。其中一个子元素(一个小元素(有动态高度(用户可以更改它(，如果需要，我想让另一个子元素有相同的高度并溢出。我试着使用最大高度等，但仍然做不到这个

.container {
display: flex;
align-items: flex-start;
}
.child {
max-width: 300px;
padding: 10px;
}
.child1 {
background: red;
overflow-y: auto;
}
.child2 {
background: green;
}

<div class="container">
<div class="child child1">
Lorem lorem Lorem lorem Lorem lorem Lorem lorem Lorem lorem Lorem lorem Lorem lorem Lorem lorem
</div>
<div class="child child2">
Lorem lorem Lorem lorem Lorem
</div>
</div>

并且我不能将最小或最大高度设置为父

Answer 1

我试过使用position。

.container {
display: flex;
}
.child {
max-width: 300px;
padding: 10px;
width: 100%;
}
.child1 {
background: red;
overflow-y: auto;
position: relative;
}
.child2 {
background: green;
}
.should-scroll {
position: absolute;
height: 100%;
top: 0;
left: 0;
}

<div class="container">
<div class="child child1">
<div class="should-scroll">
Lorem lorem Lorem lorem Lorem lorem Lorem lorem Lorem lorem Lorem lorem Lorem lorem Lorem lorem
Lorem lorem Lorem lorem Lorem lorem Lorem lorem Lorem lorem Lorem lorem Lorem lorem Lorem lorem
Lorem lorem Lorem lorem Lorem lorem Lorem lorem Lorem lorem Lorem lorem Lorem lorem Lorem lorem</div>

</div>
<div class="child child2">
Lorem lorem Lorem lorem Lorem Lorem lorem Lorem lorem Lorem loreLorem lorem Lorem lorem Lorem lore
</div>
</div>