如何使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而不是100%的高度#container？

高度#child1_child不是静态的,它可以通过其内部的内容来改变,#child1具有静态值的高度是无用的.

Answer 1

尝试设置min-height或min-width...魔法。

\n\n

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

\n\n

默认情况下，Flex 项目不会\xe2\x80\x99 缩小到低于其最小内容大小（最长单词或固定大小元素的长度）。要更改此设置，请设置 min-width 或 min-height 属性。（请参阅 \xc2\xa74.5 Flex 项目的自动最小大小。）\n https://www.w3.org/TR/css-flexbox-1/#propdef-flex

\n

Answer 2

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>

Answer 3

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

1. 无：没有额外的样式.A
2. FIT内容：添加CSS属性fit-content上.A
3. MAX-CONTENT：添加CSS属性max-content上.A
4. 表：添加CSS属性display:table上.A

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