Flexbox 不随内容扩展答案

【问题标题】：Flexbox not expanding with contentFlexbox 不随内容扩展
【发布时间】：2018-12-10 18:10:59
【问题描述】：

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

我正在使用一个自动调整大小的插件来使文本区域在用户键入他们的消息时扩展。问题是，当它改变 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>

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

【问题讨论】：

真的很奇怪的代码 - 你是在用所有这些静态高度/宽度模拟移动视口吗？
如果您正在寻找一个真实的、完整的视口答案，您可以轻松地将消息框与position: fixed + bottom: 0 对接。现在事情很愚蠢的原因是您添加的人造视口。
抱歉容器上的静态高度/宽度。是的，我正在模拟移动视口。 @staypuftman如果我使用固定位置的div，那么我需要在消息列表上进行动态填充，因为#message-input 容器现在位于消息列表上方，对吗？否则用户看不到最后的消息。

标签： html css flexbox overflow

【解决方案1】：

根据@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;
}

【讨论】：

【解决方案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

希望这会有所帮助:)

【讨论】：

解决方案 2 有点道理，但我希望发送按钮浮动在文本区域的右侧。但是，不同用户屏幕的宽度会有所不同，那么如何使用右侧的静态大小（48px）图标/按钮来一致地调整 textarea 的宽度？
codepen 已更新。请查看codepen.io/vaishalik3/pen/ERMPLd?editors=1100#0
这似乎是一个不错的解决方法，但是对于不同的视口大小，按钮并不总是宽度的 16%。我真的很想让 flexbox 布局正常工作，因为它会在视口中精确调整 textarea 的宽度。我不知道为什么那个 flexbox 的高度不会调整校正。
@jwynveen 检查另一种方法...添加了解决方案 3

【解决方案3】：

删除

style="height: 100px"

从您的 textarea 并提供 height:100% 给 CSS。

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

【讨论】：

我正在使用 Autosize (npmjs.com/package/autosize) 设置该高度，以便在用户输入更多文本时扩展。只有 100%，它不会随着更长的文本而扩展。