弹性框子

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/

附件是我想在2个案例中实现的图像

我希望这很清楚，让我知道是否有任何我可以澄清的内容

由于

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>

Answer 2

我相信你的标记过于复杂。这里简化了一下：

#panel {
  min-height: 150px;
  max-height: 150px;
  flex-direction: column;
  display: flex;
}
#panel>* {
  flex-grow:0;
}
#content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  overflow: auto;
}
#content > div {
  min-height: min-content;
  display: flex;
}
#chatbox input {
  width: 100%;
}

<div id="panel">
  <div id="title">
    Panel title
  </div>
  <div id="content">
    <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>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>

您的#content不会缩小，因为其子级没有height。要在没有硬编码的情况下给它们高度，请使用min-height:min-content和... voilà。

灵活布局，标题和聊天框占用他们需要的空间，消息总是填充其余部分，并且当太高时会滚动滚动。< / p>

这是你的（不必要的复杂恕我直言）标记的版本：

#panel {
  min-height: 150px;
  max-height: 150px;
  flex-direction: column;
  display: flex;
  border: 1px solid #f00;
}
#title {
  border: 1px solid #00f;
}
#panel>* {
  flex-grow:0;
}
#panel * {
 box-sizing: border-box;
}

#content, #chat, #content, #chatmessages {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
#chatmessages {
  overflow: auto;
}
#chatmessages > div {
  min-height: min-content;
  display: flex;
}
#chatbox input {
  width: 100%;
}

<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>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>

Answer 3

添加overflow：auto;到你的＆＃34;小组＆＃34;。

＆＃13;

＆＃13;

getName()

＆＃13;

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

#panel {
  height:150px;
  overflow: auto;
  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;
}

＆＃13;

＆＃13;

＆＃13;