如何使 Flexbox 子元素的高度适应内容，而不是其容器的 100% 高度

Question

#container {
  display:flex;
  height:300px;
  background:#333;
}
#child1 {
  width:30%;
  background:#3cf;
}
#child2 {
  width:30%;
  background:#3fc;
}
#child3 {
  width:40%;
  background:#cf3;
}
#child1_child {
  width:100%;
  background:#fc3;
}
pre {
  margin:0px;
}

    <div id="container">
    <div id="child1"><div id="child1_child"><pre>CONTENT<BR>CONTENT<BR>CONTENT<BR>CONTENT</pre></div></div>
    <div id="child2"></div>
    <div id="child3"></div>
    </div>

#child1的高度自动设置为与#container相同的高度，我该如何使其适应#child1_child而不是#container的100%高度？

#child1_child的高度不是固定的，它可以通过其中的内容进行更改，具有静态值的#child1的高度是无用的。

- Fei Sun

---

可能相关：如何在Flexbox中禁用等高列 - Michael Benjamin

Answer 1

尝试设置min-height或min-width...神奇。

#container {
  display: flex;
  height: 100%;
  min-height: 0;
}

默认情况下，flex项目不会收缩到其最小内容大小（即最长单词或固定大小元素的长度）以下。要更改此设置，请设置min-width或min-height属性。（请参见§4.5 Flex项目的自动最小大小。）https://www.w3.org/TR/css-flexbox-1/#propdef-flex

- Austen Stone

---

哇，太棒了，它能用！ - Marián Kadaňka

Answer 2

fit-content的支持有限，IE不会支持它，而Firefox仍需要前缀。此解决方案仅用于演示目的，不需要使用jQuery。选择有四种：

1. NONE: .A上没有额外的样式。
2. FIT-CONTENT：在.A上添加CSS属性fit-content。
3. MAX-CONTENT：在.A上添加CSS属性max-content。
4. TABLE：在.A上添加CSS属性display:table。

选项2和3表现相同，因此简单的解决方案是应用display:table，它非常兼容并且非常简单。height: fit-content和max-content几乎与之兼容，仅有一个小问题，即IE不支持它（IE正在成为过去，所以这基本上不是问题）。

---

演示

$('.rad').on('change', switchStyle);

function switchStyle(e) {
  var pick = $(this).val();
  switch (pick) {
    case 'nil':
      $('.A').removeClass('fit max tab');
      break;
    case 'fit':
      $('.A').addClass('fit').removeClass('max tab');
      break;
    case 'max':
      $('.A').addClass('max').removeClass('fit tab');
      break;      
    case 'tab':
      $('.A').addClass('tab').removeClass('fit max');
      break;
    default:
      break;
  }
}

.box {
  display: flex;
  height: 300px;
  background: #333;
}
.A {
  width: 30%;
  background: #3cf;
}
.B {
  width: 30%;
  background: #3fc;
}
.C {
  width: 40%;
  background: #cf3;
}
.A1 {
  width: 100%;
  background: #fc3;
}
pre {
  margin: 0px;
}
.set {
  position: relative;
  z-index: 1;
  bottom: 300px;
  left: 30%;
  width: 30ch;
  font: 400 16px/1.428 Verdana;
}
.A.fit {
  height: -moz-fit-content;
  height: -webkit-fit-content;
  height: -fit-content;
}
.A.max {
  height: max-content;
}
.A.tab {
  display: table;
}

<div class="box">
  <div class="A">
    <div class="A1"><pre>
    CONTENT
    CONTENT
    CONTENT
    CONTENT</pre>
    </div>
  </div>
  <div class="B"></div>
  <div class="C"></div>
</div>

<fieldset class='set'>
  <label>NONE
    <input class='rad' name='rad' type='radio' value='nil' checked>
  </label>
  <label>FIT-CONTENT
    <input class='rad' name='rad' type='radio' value='fit'>
  </label><br>
  <label>MAX-CONTENT
    <input class='rad' name='rad' type='radio' value='max'>
  </label>  
  <label>TABLE
    <input class='rad' name='rad' type='radio' value='tab'>
  </label>
</fieldset>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

- zer00ne

---

“height: fit-content”是一个实验性功能，截至2017年，不应在生产中使用。例如，当前的Firefox不支持它。但是Chrome支持。 - Neurotransmitter

@更新完毕，先生。请告知我是否有任何差错。 - zer00ne

Answer 3

一般不建议使用实验性值的 height CSS 属性。

如果要使单个 flex 容器子元素高度根据其内容填充，请使用 align-self: baseline;（请参见示例）。如果是所有子元素，将 align-items: baseline; 放入父容器中即可。

#container {
  display: flex;
  height: 300px;
  background: #333;
}

#child1 {
  width: 30%;
  background: #3cf;
  align-self: baseline;
}

#child2 {
  width: 30%;
  background: #3fc;
}

#child3 {
  width: 40%;
  background: #cf3;
}

#child1_child {
  width: 100%;
  background: #fc3;
}

pre {
  margin: 0;
}

    <div id="container">
    <div id="child1"><div id="child1_child"><pre>CONTENT<BR>CONTENT<BR>CONTENT<BR>CONTENT</pre></div></div>
    <div id="child2"></div>
    <div id="child3"></div>
    </div>

- Neurotransmitter

---

你不必仅因为我回答了你的问题就给我的答案减分。我的回答清楚明了地解决了提问者的问题。 - Neurotransmitter

好的，我-1了你的回答的原始版本，以指出它实际上没有回答OP并且存在一些严重缺陷。这就是-1按钮的作用。而你只是为了引起我的注意，就-1了我的完美解决方案。是的，这看起来有点“怨恨”。 - Neurotransmitter

我不是那种会故意引起注意并发放负分的“绅士”。只有在发现答案存在严重差异时，我才会投票为负。就像这个情况一样。 - Neurotransmitter

你在发牢骚，我根本不在乎一个分数。我得到了11000分，兄弟，看看这个帖子。我甚至说过你应该给我-1分。失去一个分数并不困扰我，而是你一直在发牢骚，冷静下来。我要离开了，让你自己发牢骚吧，祝你好运。 - zer00ne

值得注意的是，并不是特定的 baseline 实现了它。例如，如果您希望它在保持符合内容高度的同时居中，那么可以将 center 作为值使用。 - BryanGrezeszak