Question

我正在尝试在移动屏幕上构建基本的Messenger视图。因此，顶部有一个标题，中间是可滚动的消息列表，底部有一个带有文本区域和按钮的栏，用于发送新消息。

我正在使用自动调整大小的插件来使文本区域在用户键入消息时扩展。问题在于，当它更改height属性时，它将开始溢出其所在容器的高度，而不是使该容器扩展以占用更多空间。

此处是一个工作示例：https://codepen.io/jwynveen/pen/RJdWLB?editors=1100#0

#container {
  width: 412px;
  height: 660px;
  border: solid 2px black;
  display: flex;
  flex-direction: column;
}
#container h1 {
  border-bottom: solid 1px gray;
  margin-bottom: 0;
  padding: 1rem;
}
#container #message-list {
  flex-grow: 1;
  flex-shrink: 1;
  overflow-y: scroll;
}
#container #message-list .message {
  margin: 1rem;
  padding: 1rem;
  border: solid 1px gray;
}
#container #message-input-bar {
  display: block;
}
#container #message-input {
  padding: 1rem;
  display: flex;
  border-top: solid 2px red;
}
#container #message-input textarea {
  flex-grow: 1;
}

<html>
<div id="container">
  <h1>My Header</h1>
  <div id="message-list">
    <div class="message">This is a dummy message.</div>
    <div class="message">This is a dummy message.</div>
  </div>
  <div id="message-input">
    <textarea style="height: 100px"></textarea>
    <button id="send">Send</button>
  </div>
</div>
</html>

如果中心区域中没有消息，则文本区域将使其容器按预期扩展。但是一旦中心区域有足够的滚动空间，文本区域就会开始溢出。

Answer 1

删除

style="height: 100px"

从您的文本区域开始，并向CSS提供height：100％。

https://codepen.io/anon/pen/ZRPQBX?editors=1100#0

Answer 2

解决方案1 

您已将手动高度应用于容器。因此到达特定高度后会停在那里。

改为应用 height: auto; ，以便容器可以根据内容进行扩展

查看该密码笔- https://codepen.io/vaishalik3/pen/QxoyMd?editors=1100#0

解决方案2 - 如果您希望滚动条保持原状。

将 display: block; 而不是flex应用于 #message-input
width: 100%; 或根据您的需要 textarea

查看该密码笔-https://codepen.io/vaishalik3/pen/ERMPLd?editors=1100#0

解决方案3

将display: grid;应用于.container
display: flex;至#message-input

查看该密码笔-https://codepen.io/vaishalik3/pen/RJdqzq?editors=1100#0

希望这会有所帮助：）

Answer 3

根据@ vaishali-kapadia的建议找到了修复程序。我用另一个div包裹了＃message-input，以便添加的div是display:block，而现有的div保持了flexbox的布局。

更改自：

<div id="message-input">
  <textarea style="height: 100px"></textarea>
  <button id="send">Send</button>
</div>

收件人：

<div id="message-input-bar">
  <div id="message-input">
    <textarea style="height: 100px"></textarea>
    <button id="send">Send</button>
  </div>
</div>

添加了CSS（尽管由于div默认为display:block，所以不是必需的）：

#message-input-bar {
  display:block;
}

Flexbox不随内容扩展

3 个答案: