【发布时间】：2022-09-24 10:56:28
【问题描述】：
当 .typing-area 向上扩展时，我希望 .chat-box 缩小，当您在 .input-field 中键入并创建多行时会发生这种情况。
出于某种原因，如果我没有设置 .chat-box 的最大高度，它会溢出 .typing-area 并且这会阻止该元素完全弯曲。
我可以在纯 CSS 中实现我想要的吗？否则，如何用javascript完成？
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 62.5%;
}
body {
background-color: #fff;
display: flex;
align-content: center;
justify-content: center;
margin-top: 5rem;
}
.wrapper-chat {
display: flex;
align-items: start;
justify-content: center;
width: 40rem;
height: 34rem;
}
.chat-area {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
position: relative;
}
.chat-area header {
height: 5rem;
background-color: green;
}
.chat-box {
flex-grow: 1;
max-height: 20rem;
overflow-y: auto;
padding: 1rem 3rem 2rem 3rem;
background: white;
border: 0.5rem solid #b8b6b6;
font-size: 15px;
font-weight: 400;
line-height: 1;
}
.typing-area {
padding: 1.8rem 3rem;
display: flex;
position: absolute;
bottom: 0;
width: 100%;
background-color: green;
}
.typing-area .input-field {
display: block;
min-height: 4.5rem;
max-height: 20rem;
width: 100%;
overflow-y: auto;
font-size: 1.6rem;
padding: 1rem 2rem;
border: 2px solid whitesmoke;
border-radius: 0.5rem;
line-height: 20px;
background-color: white;
}<!DOCTYPE html>
<html>
<head>
<meta charset=\"UTF-8\">
<link rel=\"stylesheet\" href=\"style.css\">
</head>
<body>
<div class=\"wrapper-chat\">
<section class=\"chat-area\">
<header></header>
<div class=\"chat-box\">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
</div>
<form action=\"#\" class=\"typing-area\" >
<div class=\"input-field\" contentEditable=\"true\"></div>
</form>
</section>
</div>
</body>
</html>
标签： javascript html css flexbox scrollbar