时间戳

首页 > 解决方案 > Flexbox 不随内容扩展

html - Flexbox 不随内容扩展

问题描述

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

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

工作示例在这里：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 使其容器按预期展开。但是一旦中心区域有足够的滚动空间，textarea 就会开始溢出。

标签： htmlcssflexboxoverflow

解决方案

根据@vaishali-kapadia 的建议找到了修复。我用另一个 div 包装了#message-input，以便添加的 divdisplay: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（虽然不是必需的，因为display:block默认情况下 div 是）：

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

推荐阅读