Question

我正在尝试制作一个简单的flex布局：

#header {
  background-color: grey;
}
#container {
  display:flex;
  height: calc(100vh - 50px);
}
#chatAndUserContainer {
  display: flex;
  width: 100%;
}
#chatContainer {
  background-color: red;
  width:100%;
}
#usersContainer {
  background-color: green;
  width:320px;
}

<div id="header">header</div>
<div id="container">
  <div id="chatAndUserContainer">
    <div id="chatContainer">
      chatContainer
    </div>
    <div id="usersContainer">
      usersContainer
    </div>
    
  </div>
</div>

问题是：呈现时， #usersContainer的宽度不是320px，而是... 274px！

关于如何纠正该问题的任何想法？（我需要使用display：flex，而不是绝对的）

Answer 1

您正面临收缩效应。由于总宽度（100％+ 320px）大于100％，因此您的两个元素均会缩小以适合其父容器。

为避免这种情况，您可以禁用第二个div的收缩：

#header {
  background-color: grey;
}
#container {
  display:flex;
  height: calc(100vh - 50px);
}
#chatAndUserContainer {
  display: flex;
  width: 100%;
}
#chatContainer {
  background-color: red;
  width:100%;
}
#usersContainer {
  background-color: green;
  width:320px;
  flex-shrink:0;
}

<div id="header">header</div>
<div id="container">
  <div id="chatAndUserContainer">
    <div id="chatContainer">
      chatContainer
    </div>
    <div id="usersContainer">
      usersContainer
    </div>
    
  </div>
</div>

或者不要使用width:100%并将其替换为flex:1，以便您的第一个div会填充第二个div剩下的剩余空间：

#header {
  background-color: grey;
}
#container {
  display:flex;
  height: calc(100vh - 50px);
}
#chatAndUserContainer {
  display: flex;
  width:100%;
}
#chatContainer {
  background-color: red;
    flex:1;
}
#usersContainer {
  background-color: green;
  width:320px;
}

<div id="header">header</div>
<div id="container">
  <div id="chatAndUserContainer">
    <div id="chatContainer">
      chatContainer
    </div>
    <div id="usersContainer">
      usersContainer
    </div>
    
  </div>
</div>

Answer 2

您可以在calc()中使用#chatContainer，或者在min-width中使用#usersContainer，也可以像下面的示例一样使用它们。

#header {
  background-color: grey;
}
#container {
  display:flex;
  height: calc(100vh - 50px);
}
#chatAndUserContainer {
  display: flex;
  width: 100%;
}
#chatContainer {
  background-color: red;
  width:calc(100% - 320px);
}
#usersContainer {
  background-color: green;
  width:320px;
  min-width: 320px;
}

<div id="header">header</div>
<div id="container">
  <div id="chatAndUserContainer">
    <div id="chatContainer">
      chatContainer
    </div>
    <div id="usersContainer">
      usersContainer
    </div>
    
  </div>
</div>

css3 flex：如何创建2个列：100％+固定宽度？

2 个答案: