使包裹的flexbox的孩子挤进父母的高度[重复]答案

【问题标题】：Make wrapped flexbox's children squeeze into parent's height [duplicate]使包裹的flexbox的孩子挤进父母的高度[重复]
【发布时间】：2017-08-18 20:02:02
【问题描述】：

我想构建一个网格，为新单元格动态腾出空间并最终环绕。我认为一些图片最能说明我正在尝试做的事情。

黑色方框是视口，浅蓝色方框是添加的元素。

一个框刚好填满整个视口：

随着更多盒子的添加，布局会将它们水平挤压：

直到达到最小宽度并且布局环绕：

最好的方法是什么？我尝试使用 flexbox，但在启用flex-wrap 时无法将框垂直挤压到视口中 - 它们只会溢出。

编辑：添加了 sn-p 显示我尝试过的内容：

main {
  display: flex;
  flex-wrap: wrap;
  height: 210px;
  width: 330px;
  border: solid 1px black;
  margin-bottom: 30px;
}

main > div {
  flex: 1 0 100px;
  background: lightblue;
  margin: 5px;
}

main > div > p {
  /* Content placeholder */
  height: 200px;
}

This looks relatively good (except for the width of the 4th div):
<main>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</main>

As soon as you add content, it breaks:
<main>
  <div><p></p></div>
  <div><p></p></div>
  <div><p></p></div>
  <div><p></p></div>
</main>

【问题讨论】：

查看弹性项目中的min-height 属性。
请贴出您尝试过的代码。
@Michael_B 我刚刚添加了一个 sn-p。
@Ricky min-height 在我进行研究的一些网站上被提及，但我不确定如何应用它。将min-height 设置为divs 上的任何可能值都没有任何区别。

标签： html css flexbox

【解决方案1】：

在不知道它将包含多少元素的情况下，我看不到设置断点的简单方法，但使用 flex-basis 可能会对您有所帮助，我还发现 this 可能是您的解决方案。

【讨论】：