Flexbox 高度根据内容调整

Question

我使用“完整设计”的弹性盒。我有一个奇怪的问题：我有一个容器占用了所有剩余空间，我希望在这个容器中，子项（也是弹性盒）的高度根据其内容进行调整。

问题是这样的：

body, html {
  width:100%;
  height:100%;
  display:flex;
}

.container {
  display:flex;
  flex:1;
  flex-wrap:wrap;
}

.icon {
  width:10vh;
  margin:10px;
  display:flex;
  flex-direction:column;
}
.img {
  width:10vh;
  height:10vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background-color:red;
}

.text {
  text-align:center;
  
}

<div class="container">
<div class="icon">
<div class="img">
</div>
<div class="text">
action 1
</div>
</div>
<div class="icon">
<div class="img">
</div>
<div class="text">
Action 2
</div>
</div>

<div class="icon">
<div class="img">
</div>
<div class="text">
Action 3
</div>
</div>

<div class="icon">
<div class="img">
</div>
<div class="text">
Action 4
</div>
</div>

<div class="icon">
<div class="img">
</div>
<div class="text">
Action 5
</div>
</div>

</div>

正如你所看到的，图标占据了容器的整个高度：事实上，我不想指定高度，因为我不知道文本长度并且真的想要这样，如果内容很大，图标占据其内容的高度（不想剪切文本）。此外，如果调整页面大小，我真的希望图标对齐（就像在智能手机上一样）。

另外，我不明白为什么图标采用其父级的高度而不是其内容，因为我没有在其上指定“flex：1”。我认为默认行为是适应内容大小，但这似乎不起作用。

问题的形象

Answer 1

.icon'sflex-column使.img's 默认拉伸，除非.icon's have align-items。我之所以没有申请align-items' .icons 是因为其他嵌套flex-containers/flex-items开始崩溃。我没有按照层次结构向下调整，而是向上调整.container。

相关CSS：

.container {
  display: flex;
  flex: 1;         /* If you remove this .container will shrink to wrap around .icon's */
  flex-wrap: wrap;
  justify-content: center;  /* This centers .icon's along a horizontal axis. */
  align-items: baseline;    /* This aligns .icon's along a common baseline vertically. */
  outline: 3px dashed blue; /* To show the size of .container */
}
.icon {
  width: 10vh;
  margin: 10px;
  display: flex;
  flex-direction: column;
  outline: 1px dashed red; /* To show the size of .icon */
} 

.container {
  display: flex;
  flex: 1;         /* If you remove this .container will shrink to wrap around .icon's */
  flex-wrap: wrap;
  justify-content: center;  /* This centers .icon's along a horizontal axis. */
  align-items: baseline;    /* This aligns .icon's along a common baseline vertically. */
  outline: 3px dashed blue; /* To show the size of .container */
}
.icon {
  width: 10vh;
  margin: 10px;
  display: flex;
  flex-direction: column;
  outline: 1px dashed red; /* To show the size of .icon */
} 

body,
html {
  width: 100%;
  height: 100%;
  display: flex;
}
.container {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  align-content: flex-start;
  outline: 3px dashed blue;
}
.icon {
  width: 10vh;
  margin: 10px;
  display: flex;
  flex-direction: column;
  outline: 1px dashed red;
}
.img {
  width: 10vh;
  height: 10vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: red;
}
.text {
  text-align: center;
}