Flexbox 列的宽度在调整窗口大小时不会缩小

Question

当浏览器窗口缩小时，我使用 Flexbox 使 5 个框做出响应。其中 4 个盒子呈 2 列且无法缩小 ( flex-direction: column)。不在列中的单个框会正确收缩。

（鲍勃的行为正确，但凯特、尼克、简和弗雷德拒绝减小宽度。）

如何使列的宽度随着浏览器窗口尺寸的减小而缩小？

.container {
  display: flex;
  width: 100%;
  justify-content: center;
  border: 2px solid red;
}

.column {
  display: flex;
  flex-direction: column;
}

.big {
  display: flex;
  width: 400px;
  height: 400px;
  background: yellow;
  border: 5px solid blue;
}

.small {
  display: flex;
  width: 195px;
  height: 195px;
  background: yellow;
  border: 5px solid blue;
}

<div class="container">
  <div class="big"><span>Bob</span></div>

  <div class="column">
    <div class="small"><span>Kate</span></div>
    <div class="small"><span>Nick</span></div>
  </div>

  <div class="column">
    <div class="small"><span>Jane</span></div>
    <div class="small"><span>Fred</span></div>
  </div>
</div>

此处演示：https://jsfiddle.net/CodeCabbie/1xvjeo3p/44/

Answer 1

width: 195px;使用类的小框使用固定宽度（ ）.small似乎很奇怪，并且可以解释为什么这些列不会随着窗口大小的调整而缩小。

组合：

• flex-basis对于小盒子
• flex-grow列上的属性

这将允许所有列相应地分配剩余空间。

（其实Michael Benjamin的回答更简单）

像这样的例子： https: //jsfiddle.net/ko4Lszdy/

.container {
  display: flex;
  width: 100%;
  justify-content: center;
  border: 2px solid red;
}

.column {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  /* Small columns will take 1/6 of the available space */
  max-width: 200px;
}

.big {
  display: flex;
  flex-grow: 2;
  /* Big column will take 2/3 of the available space */
  max-width: 400px;
  height: 400px;
  background: yellow;
  border: 5px solid blue;
}

.small {
  display: flex;
  flex-basis: 100%;
  /* Allow the small boxes to grow/shrink as needed */
  height: 195px;
  background: yellow;
  border: 5px solid blue;
}

<div class="container">
  <div class="big"><span>Bob</span></div>

  <div class="column">
    <div class="small"><span>Kate</span></div>
    <div class="small"><span>Nick</span></div>
  </div>

  <div class="column">
    <div class="small"><span>Jane</span></div>
    <div class="small"><span>Fred</span></div>
  </div>
</div>