当 flex 项大于 flex 容器时，我可以将 flexbox 项缩小到相同的大小吗？答案

【问题标题】：Can I shrink flexbox items into same size when flex items are bigger than the flex container?当 flex 项大于 flex 容器时，我可以将 flexbox 项缩小到相同的大小吗？
【发布时间】：2020-03-22 17:10:45
【问题描述】：

我希望当弹性项目的总大小小于弹性容器时，弹性项目应该占据各自的空间；并且当弹性项目的总大小大于弹性容器时，弹性项目应该平均分配容器的空间。

因此，我将 flex-grow 设置为 0，将 flex-shrink 设置为 1。为了使 flex 项目缩小到小于其最小内容，我将 min-height 设置为 0。但是无论我如何设置弹性项目的 flex-basis 属性，我都无法获得所需的样式。

当弹性项目的总大小小于弹性容器的大小时，image 右侧部分的示例 1 是预期的。当弹性项目的总大小大于弹性容器的大小时，image 左侧的示例 2 是预期的。

.flex-container {
  font-size: 12px;
  display: flex;
  flex-direction: column;
  width: 200px;
  height: 180px;
  border: 1px solid #dadfe3;
  justify-content: space-evenly;
}

.flex-item {
  flex: 0 1 auto;
  min-height: 0;
  overflow: auto;
  margin: 0 20px;
  max-height: 50%;
}

.flex-item div {
  margin: 4px 0;
  background-color: #f0f9ff;
  color: #2f88ff;
}

<body>
  <h2>Example 1</h2>
  <div class="flex-container">
    <div class="flex-item">
      <input type="text" placeholder="filter 1">
      <div>item content 1</div>
      <div>item content 2</div>
      <div>item content 2</div>
      <div>item content 4</div>
    </div>
    <div class="flex-item">
      <input type="text" placeholder="filter 2">
    </div>
  </div>

  <h2>Example 2</h2>
  <div class="flex-container">
    <div class="flex-item">
      <input type="text" placeholder="filter 1">
      <div>item content 1</div>
      <div>item content 2</div>
      <div>item content 3</div>
      <div>item content 4</div>
      <div>item content 5</div>
      <div>item content 6</div>
    </div>
    <div class="flex-item">
      <input type="text" placeholder="filter 2">
      <div>item 1</div>
      <div>item 2</div>
      <div>item 3</div>
      <div>item 4</div>
      <div>item 5</div>
      <div>item 6</div>
      <div>item 7</div>
      <div>item 8</div>
      <div>item 9</div>
      <div>item 10</div>
      <div>item 11</div>
      <div>item 12</div>
      <div>item 13</div>
      <div>item 14</div>
      <div>item 15</div>
    </div>
  </div>
</body>

【问题讨论】：

想要的风格是什么？您想在这里实现什么目标？
我添加了一张图片来提供问题。

标签： css flexbox

【解决方案1】：

如果我理解正确，那么你想要这个。如果没有，那么您能否在评论部分解释更多。

.flex-container {
  font-size: 12px;
  display: flex;
  flex-direction: column;
  width: 200px;
  height: 180px;
  border: 1px solid #dadfe3;
  justify-content: space-between;
}


/*.flex-item:first-child {
    min-height: 50%;
}*/

.flex-item {
  flex: 0 1 auto;
  overflow: auto;
  margin: 0 20px;
  min-height: 0;
}

.flex-item div {
  margin: 4px 0;
  background-color: #f0f9ff;
  color: #2f88ff;
}

<body>
  <h2>Example 1</h2>
  <div class="flex-container">
    <div class="flex-item">
      <input type="text" placeholder="filter 1">
      <div>item content 1</div>
      <div>item content 2</div>
    </div>
    <div class="flex-item">
      <input type="text" placeholder="filter 2">
    </div>
  </div>
  

  <h2>Example 2</h2>
  <div class="flex-container">
    <div class="flex-item">
      <input type="text" placeholder="filter 2">
      <div>item 1</div>
      <div>item 2</div>
      <div>item 2</div>
      <div>item 2</div>
      <div>item 2</div>
      <div>item 2</div>
    </div>
    <div class="flex-item">
      <input type="text" placeholder="filter 1">
      <div>item content 1</div>
      <div>item content 1</div>
      <div>item content 1</div>
      <div>item content 1</div>
      <div>item content 1</div>
      <div>item content 1</div>
      <div>item content 1</div>
      <div>item content 1</div>
    </div>
  </div>
  

  <h2>Example 3</h2>
  <div class="flex-container">
    <div class="flex-item">
      <input type="text" placeholder="filter 2">
      <div>item 1</div>
      <div>item 2</div>
    </div>
    <div class="flex-item">
      <input type="text" placeholder="filter 1">
      <div>item content 1</div>
      <div>item content 1</div>
      <div>item content 1</div>
      <div>item content 1</div>
      <div>item content 1</div>
      <div>item content 1</div>
      <div>item content 1</div>
      <div>item content 1</div>
    </div>
  </div>
  

  <h2>Example 4</h2>
  <div class="flex-container">
    <div class="flex-item">
      <input type="text" placeholder="filter 2">
      <div>item 1</div>
      <div>item 2</div>
      <div>item 2</div>
      <div>item 2</div>
      <div>item 2</div>
      <div>item 2</div>
      <div>item 2</div>
    </div>
    <div class="flex-item">
      <input type="text" placeholder="filter 1">
    </div>
  </div>
</body>

【讨论】：

示例 2 很棒，max-height: 50% 很聪明。但例如 1，请参阅我更新的问题。当弹性项目的总高度小于容器的高度时，我希望它们完全显示而没有滚动条，而 max-height: 50% 不是很好。
你能分享截图或img，以便我能正确理解
有两个弹性项目，你是说如果弹性项目的高度小于外部容器的高度，那么它将显示在完整的容器中。如果是，那么第二个弹性项目会去哪里？？
我在问题上贴了一个图片链接。
嘿，我想它已经完成了。请立即查看并告诉我

【解决方案2】：

我会使用display: grid 而不是display: flex 来实现这一点。这是一个例子：

.flex-container {
  font-size: 12px;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(2, minmax(minmax(0, auto), 50%));
  width: 200px;
  height: 500px;
  border: 1px solid #dadfe3;
}

.flex-item {
  min-height: 0;
  overflow: auto;
  margin: 0 20px;
}

.flex-item div {
  margin: 4px 0;
  background-color: #f0f9ff;
  color: #2f88ff;
}

<body>
  <div class="flex-container">
    <div class="flex-item">
      <input type="text" placeholder="filter 1">
      <div>item content 1</div>
      <div>item content 2</div>
      <div>item content 3</div>
      <div>item content 4</div>
      <div>item content 5</div>
      <div>item content 6</div>
    </div>
    <div class="flex-item">
      <input type="text" placeholder="filter 2">
      <div>item 1</div>
      <div>item 2</div>
      <div>item 3</div>
      <div>item 4</div>
      <div>item 5</div>
      <div>item 6</div>
      <div>item 7</div>
      <div>item 8</div>
      <div>item 9</div>
      <div>item 10</div>
      <div>item 11</div>
      <div>item 12</div>
      <div>item 13</div>
      <div>item 14</div>
      <div>item 15</div>
    </div>
  </div>
</body>

编辑：

您似乎在提出问题后改变了主意，现在要求略有不同。

最好将所有空白移到底部而不是将它们平均分成两部分 - @pIckedrAin

尽管如此，我仍会保留上面的答案，因为它回答了最初的问题，并且将来可能会帮助其他有类似问题的人。

这是由于您的新要求而建议的调整：

.flex-container {
  font-size: 12px;
  display: grid;
  align-content: start;
  width: 200px;
  height: 300px;
  border: 1px solid #dadfe3;
}

.flex-item {
  min-height: 0;
  overflow: auto;
  margin: 0 20px;
}

.flex-item div {
  margin: 4px 0;
  background-color: #f0f9ff;
  color: #2f88ff;
}

<body>
  <div class="flex-container">
    <div class="flex-item">
      <input type="text" placeholder="filter 1">
      <div>item content 1</div>
      <div>item content 2</div>
      <div>item content 3</div>
      <div>item content 4</div>
      <div>item content 5</div>
      <div>item content 6</div>
    </div>
    <div class="flex-item">
      <input type="text" placeholder="filter 2">
      <div>item 1</div>
      <div>item 2</div>
      <div>item 3</div>
      <div>item 4</div>
      <div>item 5</div>
      <div>item 6</div>
      <div>item 7</div>
      <div>item 8</div>
      <div>item 9</div>
      <div>item 10</div>
      <div>item 11</div>
      <div>item 12</div>
      <div>item 13</div>
      <div>item 14</div>
      <div>item 15</div>
    </div>
  </div>
</body>

但是，我认为根据您的新要求，您不再需要网格布局。这只需要为项目提供相等的空间，以防容器高度小于其内容的高度。

这是简单的 flex-box 版本：

.flex-container {
  font-size: 12px;
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  width: 200px;
  height: 300px;
  border: 1px solid #dadfe3;
}

.flex-item {
  min-height: 0;
  overflow: auto;
  margin: 0 20px;
}

.flex-item div {
  margin: 4px 0;
  background-color: #f0f9ff;
  color: #2f88ff;
}

<body>
  <div class="flex-container">
    <div class="flex-item">
      <input type="text" placeholder="filter 1">
      <div>item content 1</div>
      <div>item content 2</div>
      <div>item content 3</div>
      <div>item content 4</div>
      <div>item content 5</div>
      <div>item content 6</div>
    </div>
    <div class="flex-item">
      <input type="text" placeholder="filter 2">
      <div>item 1</div>
      <div>item 2</div>
      <div>item 3</div>
      <div>item 4</div>
      <div>item 5</div>
      <div>item 6</div>
      <div>item 7</div>
      <div>item 8</div>
      <div>item 9</div>
      <div>item 10</div>
      <div>item 11</div>
      <div>item 12</div>
      <div>item 13</div>
      <div>item 14</div>
      <div>item 15</div>
    </div>
  </div>
</body>

【讨论】：

我不熟悉网格布局。但它似乎与网格布局完美。我尝试将容器的高度从 200px 设置为 700px 以查看结果。最好将所有空白移到底部，而不是将它们平均分成两部分。
很好且非常简单的解决方案。
谢谢，很高兴能帮上忙 :)