#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;
#child1
的高度会自动设置为#container
的相同高度,如何使其适合#child1_child
而不是#container
的100%高度?
#child1_child
的高度不是静态的,可以通过其中的内容进行更改,#child1
的高度与静态值无关。
答案 0 :(得分:2)
<强>更新强>
TranslucentCloud指出fit-content
的支持有限。此更新有一些jQuery仅用于演示目的,并不是解决方案所必需的。已经快一年了,我学到了一些东西。有3种选择:
- 无:
上没有额外的样式#child1
- FIT-CONTENT:在
上添加CSS属性fit-content
#child1
- 表:在
醇>display:table
上添加CSS属性#child1
选项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-height
或min-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