html - flex 盒子子项中的 CSS flex 盒子

Question

我有一个面板，它使用 display: flex 来具有固定大小的标题，然后使用内容 div 填充面板的其余高度(面板可以是任何高度)。 效果很好。

在内容 div 中我想要同样的东西，但相反。然而这一次，内容 div 包含一堆内容(为了简单起见，我们说文本)。该内容 div 的行为应如下:

• 如果内容很小，它应该扩展以填充父级 div
• 如果内容太大，应该会溢出滚动

目前我也不知道该怎么做。

这是问题的演示:

div {
  user-select: none;
  cursor: default;
}

#panel {
  height:150px;
  
  display: flex;
  flex-direction: column;
  
  border: 1px solid #f00;
}

#title {
  flex: 0 1 auto;
}

#content {
  flex: 1 1 auto;
}

#chat {
  display: flex;
  flex-direction: column;
  
  
  border: 1px solid #00f;
}

#chatmessages {
  flex: 1 1 auto;
}

#chatbox {
  flex: 0 1 auto;
}

<div id="panel">
<div id="title">
Panel title
</div>
<div id="content">

<div id="chat">
<div id="chatmessages">
<div>Hello World</div>
<div>Hello World</div>
<div>Hello World</div>
<div>Hello World</div>
<div>Hello World</div>
<div>Hello World</div>
<div>Hello World</div>
<div>Hello World</div>
<div>Hello World</div>
<div>Hello World</div>
<div>Hello World</div>
</div>
<div id="chatbox">
<input value="this will be a chat box" />
</div>
</div>

</div>
</div>

https://jsfiddle.net/wh5sq6fw/7/

附件是我想在这两种情况下实现的目标的图像

我希望这足够清楚，如果有什么我可以澄清的，请告诉我

谢谢

Answer 1

#content、#chat、#chatmessages需要高度，我删除了#content div 和一些规则/属性，并将 overflow: auto 添加到 #chatmessages

div {
  user-select: none;
  cursor: default;
}
#panel {
  height: 150px;
  display: flex;
  flex-direction: column;
  border: 1px solid #f00;
}
#chat {
  flex: 1;
  display: flex;
  flex-direction: column;
}
#chatmessages {
  flex: 1;
  overflow: auto;
  border: 1px solid #00f;
}

<div id="panel">
  <div id="title">
    Panel title
  </div>
  <div id="chat">
    <div id="chatmessages">
      <div>Hello World</div>
      <div>Hello World</div>
      <div>Hello World</div>
      <div>Hello World</div>
      <div>Hello World</div>
      <div>Hello World</div>
      <div>Hello World</div>
      <div>Hello World</div>
      <div>Hello World</div>
      <div>Hello World</div>
      <div>Hello World</div>
    </div>
    <div id="chatbox">
      <input value="this will be a chat box" />
    </div>
  </div>
</div>

---

如果你必须有#content，它需要display: flex; flex :1；

div {
  user-select: none;
  cursor: default;
}
#panel {
  height: 150px;
  display: flex;
  flex-direction: column;
  border: 1px solid #f00;
}
#content, #chat {
  flex: 1;
  display: flex;
  flex-direction: column;
}
#chatmessages {
  flex: 1;
  overflow: auto;
  border: 1px solid #00f;
}

<div id="panel">
  <div id="title">
    Panel title
  </div>
  <div id="content">
    <div id="chat">
      <div id="chatmessages">
        <div>Hello World</div>
        <div>Hello World</div>
        <div>Hello World</div>
        <div>Hello World</div>
        <div>Hello World</div>
        <div>Hello World</div>
        <div>Hello World</div>
        <div>Hello World</div>
        <div>Hello World</div>
        <div>Hello World</div>
        <div>Hello World</div>
      </div>
      <div id="chatbox">
        <input value="this will be a chat box" />
      </div>
    </div>
  </div>
</div>