Html Flexbox不随内容扩展

我正在尝试在手机屏幕上构建一个基本的messenger视图。因此，在顶部有一个标头，中间有一个可滚动的消息列表，底部有一个带有文本和按钮的条，发送一个新的消息。 我正在使用一个自动调整大小的插件，当用户键入消息时，使文本区域扩展。问题是，当它更改height属性时，它将开始溢出它所在容器的高度，而不是容器扩展以占用更多空间

工作样本如下：

容器{ 宽度：412px； 高度：660px； 边框：纯色2px黑色； 显示器：flex； 弯曲方向：立柱； } 容器h1{ 边框底部：实心1px灰色； 页边距底部：0； 填充：1rem； } 容器消息列表{ 柔性生长：1； 弹性收缩：1； 溢出y：滚动； } 容器消息列表{ 保证金：1rem； 填充：1rem； 边框：实心1px灰色； } 容器消息输入栏{ 显示：块； } 容器消息输入{ 填充：1rem； 显示器：flex； 边框顶部：实心2px红色； } 容器消息输入文本区{ 柔性生长：1； } 我的头球 这是一条假消息。 这是一条假消息。 邮寄 除去

style="height: 100px"

从您的文本区域，并提供高度：100%到CSS

解决方案1

您已将手动高度应用于容器。所以到达那个特定高度后，它就停止了

而是应用高度：自动；以便容器可以根据内容进行扩展

看看这个密码笔-

解决方案2- 以防您想要滚动条的原样

应用显示：块；而不是flex到消息输入 宽度：100%；或根据您的需要发送文本区域 看看这个密码笔-

解决方案3

应用显示：网格；到.集装箱 显示器：flex；到消息输入 看看这个密码笔-

---

希望这有帮助：

根据@vaishali kapadia的建议找到了一个修复方案。我用另一个div包装消息输入，以便添加的div是display:block，而现有的div保持flexbox布局

更改自：

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

---

非常奇怪的代码-你在用所有这些静态高度/宽度模拟移动视口吗？你可以很容易地将消息框停靠在一个位置：fixed+bottom:0，如果这是你想要的真实、完整的视口答案。现在事情变得愚蠢的原因是你添加的人造视口。很抱歉容器上的静态高度/宽度。是的，我正在模拟移动视口@staypuftman如果我使用一个固定位置的div，那么我需要在消息列表上添加动态的填充量，因为消息输入容器现在位于消息列表的上方，对吗？否则，用户将看不到最后的消息。我正在使用Autosize设置该高度，以便它随着用户输入更多文本而扩展。解决方案2有一定的意义，但我希望发送按钮浮动在文本区域的右侧。但是，不同用户屏幕的宽度会有所不同，因此如何使用右侧静态大小为48px的图标/按钮来一致调整textarea宽度？codepen已更新。请检查这似乎是一个不错的解决办法，但对于不同的视口大小，按钮并不总是宽度的16%。我真的很想让flexbox布局正常工作，因为它可以精确地调整整个视口的文本区域宽度。我不知道为什么flexbox的高度不能调整校正。@jwynveen检查另一种方法。。。添加解决方案3

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

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