Flexbox 不随内容扩展

Question

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

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

工作示例在这里：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>

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

Answer 1

删除

style="height: 100px"

从您的文本区域提供 height:100% 至 CSS。

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

Answer 2

Solution 1

您已将手动高度应用于容器。所以它在达到特定高度后停在那里。

而是应用 height: auto; 以便容器可以根据内容扩展

看这个codepen - https://codepen.io/vaishalik3/pen/QxoyMd?editors=1100#0

Solution 2 - In case you want scrollbar as it is.

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

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

Solution 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 而现有的保持 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 不随内容扩展

Flexbox not expanding with content

html

css

overflow

flexbox