css - flexbox 高度根据内容调整

Question

我使用“完整设计”的 flexbox。我有一个奇怪的问题:我有一个容器占用了所有剩余空间，我希望在这个容器中， child (也是 flexbox)的高度可以根据内容进行调整。

问题是:

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”。我假设默认行为是为了适应内容大小，但这似乎不起作用。

image of the issue

Answer 1

.icon 是 flex-column 这使得 .img 的默认拉伸(stretch)除非 .icon 有 align-items。我没有将 align-items 应用于 .icon 的原因是其他嵌套的 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 */
} 

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;
}

<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>