我在我的应用程序中有一个部分，那里有消息，在一定的高度后，它溢出并滚动在里面。这很好，但是当它下面的容器膨胀超过它设置的最小高度时，主体也会溢出。下面的容器是一个自动展开的输入。
当我的输入扩展超过其设置的最小高度时，我如何调整可滚动容器的高度?我的输入容器的最大高度为400px，起始高度为100px。我的可滚动容器的起始高度是视窗高度的100%减去输入容器的起始高度(100px)。
HTML:
<div class="container">
<div class="scrollable-container">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum ullam deserunt velit unde odio officiis modi, assumenda at adipisci temporibus veritatis ex vel voluptas possimus animi perspiciatis officia ipsam molestiae!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis ducimus, tempore cupiditate ipsa magni aspernatur molestias debitis quo. Iusto, error exercitationem. Distinctio est beatae, saepe nisi iure ducimus exercitationem rem?
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Molestias quos ullam laboriosam libero qui illum amet, numquam necessitatibus dolorem aliquid, inventore cumque repellendus accusamus ipsum deserunt beatae rem, quo neque!
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quidem consequatur aperiam fugit culpa deleniti sit dolore fugiat necessitatibus suscipit, beatae sint. Reprehenderit placeat iste molestias velit sunt accusamus doloribus repudiandae!
</div>
<div class="expanding-input">
<textarea name="" id="" cols="30" rows="10"></textarea>
</div>
</div>
CSS:
.scrollable-container {
height: calc(100vh - 100px);
background: blue;
overflow-y: scroll;
font-size: 50px;
}
.expanding-input {
height: 100px;
max-height: 400px;
background: red;
}
只要展开的输入保持在90px的高度，上面的代码就可以工作。如果设置的值高于此值，则正文开始溢出。
你可以使用css flex来完成这些。
.container {
display:flex;
flex-direction:column;
height:175px;
border:1px solid black;
}
.scrollable-container {
border: 1px solid red;
flex:5 1 0;
overflow-y:auto;
}
.expanding-input {
flex:1 1 0;
border:1px solid green;
}
.expanding-input textarea {
height: 10px;
}<html>
<body>
<div class="container">
<div class="expanding-input">
<textarea name="" id="" cols="30" rows="10"></textarea>
</div>
<div class="scrollable-container">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum ullam deserunt velit unde odio officiis modi, assumenda at adipisci temporibus veritatis ex vel voluptas possimus animi perspiciatis officia ipsam molestiae!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis ducimus, tempore cupiditate ipsa magni aspernatur molestias debitis quo. Iusto, error exercitationem. Distinctio est beatae, saepe nisi iure ducimus exercitationem rem?
</div>
</div>
</body>
</html>