如何使flexbox子的高度适合内容而不是其容器的100%高度

时间:2016-02-28 15:56:26

标签: css css3 flexbox



#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>
&#13;
&#13;
&#13;

#child1的高度会自动设置为#container的相同高度,如何使其适合#child1_child而不是#container的100%高度?

#child1_child的高度不是静态的,可以通过其中的内容进行更改,#child1的高度与静态值无关。

3 个答案:

答案 0 :(得分:2)

<强>更新

TranslucentCloud指出fit-content的支持有限。此更新有一些jQuery仅用于演示目的,并不是解决方案所必需的。已经快一年了,我学到了一些东西。有3种选择:

  
      
  1. 无: #child1
  2. 上没有额外的样式   
  3. FIT-CONTENT:fit-content
  4. 上添加CSS属性#child1   
  5. 表:display:table上添加CSS属性#child1
  6.   

选项2和3的行为完全相同,因此总之最简单的解决方案是应用display:table和FTW它非常兼容*因为它很简单。

*如果您想要support Safari 5.1.17这是一个过时的浏览器5年,5个版本和1个新引擎,请不要向#child1添加填充或边距,可以安全地假设不再是问题。

<强> OLD

尝试将以下内容添加到child1

  height:-moz-fit-content;
  height:-webkit-fit-content;
  height:fit-content;

<强>段

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

function switchStyle(e) {
  var pick = $(this).val();
  switch (pick) {
    case 'nil':
      $('#child1').removeClass('fit tab');
      break;
    case 'fit':
      $('#child1').removeClass('tab').addClass('fit');
      break;
    case 'tab':
      $('#child1').addClass('tab').removeClass('fit');
      break;
    default:
      break;
  }
}
#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;
}
#set {
  position: relative;
  z-index: 1;
  bottom: 75px;
  left: 30%;
  width: 30ch;
  font: 400 16px/1.428 Verdana;
}
#child1.fit {
  height: -moz-fit-content;
  height: -webkit-fit-content;
  height: -fit-content;
}
#child1.tab {
  display: table;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <div id="child1">
    <div id="child1_child"><pre>
    CONTENT
    CONTENT
    CONTENT
    CONTENT</pre>
    </div>
  </div>
  <div id="child2"></div>
  <div id="child3"></div>
</div>

<fieldset id='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>
  <label>TABLE
    <input class='rad' name='rad' type='radio' value='tab'>
  </label>
</fieldset>

答案 1 :(得分:2)

height CSS属性的实验值不是Flexbox方式。

如果您希望根据其内容填充高度的单个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>

答案 2 :(得分:1)

尝试设置min-heightmin-width ...魔术。

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

默认情况下,弹性项目不会缩小到其最小内容大小(最长的单词或固定大小的元素的长度)以下。要更改此设置,请设置min-width或min-height属性。 (请参见第4.5节“弹性商品的自动最小尺寸”。) https://www.w3.org/TR/css-flexbox-1/#propdef-flex