Css 如何制作flexbox儿童&x27；s高度以适合内容，而不是容器的100%高度

#容器{
显示器：flex；
高度：300px；
背景：#333；
}
#孩子1{
宽度：30%；
背景：3cf；
}
#孩子2{
宽度：30%；
背景：#3fc；
}
#孩子3{
宽度：40%；
背景：#cf3；
}
#孩子{
宽度：100%；
背景:#fc3；
}
前{
边际：0px；
}

内容
内容
内容
内容

适合的内容

在支持方面受到限制；IE永远不支持它，Firefox仍然需要前缀。此解决方案的jQuery仅用于演示目的，而不是解决方案所必需的。有四种选择：

无：在

.A

FIT-CONTENT:在

上添加CSS属性
FIT-CONTENT

MAX-CONTENT:在

上添加CSS属性
MAX-CONTENT

TABLE:在

.A

---

选项2和3的行为完全相同，因此，总之，最简单的解决方案是应用

display:table

，而且它非常简单，因此具有难以置信的兼容性<代码>高度：适合内容和

最大内容

几乎与一个小警告兼容，即IE不支持它（IE正在向恐龙的方向发展，所以它几乎不是问题）

---

演示

$（'.rad'）。在（'change'，switchStyle'）；
功能切换样式（e）{
var pick=$（this.val（）；
开关（拾取）{
案件‘无’：
$（'.A'）.removeClass（'fit max tab'）；
打破
案例“适合”：
$（'.A'）.addClass（'fit'）.removeClass（'max tab'）；
打破
案例“max”：
$（'.A'）.addClass（'max'）.removeClass（'fit tab'）；
打破
案例“选项卡”：
$（'.A'）.addClass（'tab'）.removeClass（'fit max'）；
打破
违约：
打破
}
}

.box{
显示器：flex；
高度：300px；
背景：#333；
}
.A{
宽度：30%；
背景：3cf；
}
.B{
宽度：30%；
背景：#3fc；
}
C{
宽度：40%；
背景：#cf3；
}
.A1{
宽度：100%；
背景:#fc3；
}
前{
边际：0px；
}
.设置{
位置：相对位置；
z指数：1；
底部：300px；
左：30%；
宽度：30厘米；
字体：400 16px/1.428 Verdana；
}
A.健康{
高度：-moz-fit内容；
高度：-webkit适合内容；
高度：-适合的内容；
}
A.max{
高度：最大含量；
}
A.标签{
显示：表格；
}

内容
内容
内容
内容
没有一个
适合内容


最大含量
桌子

通常不鼓励使用

高度

CSS属性的实验值

如果要根据其内容填充高度的是单个

flex

box子项，请使用

align self:baseline（参见示例）。如果是所有子项，则放入
对齐项：基线编码到父容器中


#容器{
显示器：flex；
高度：300px；
背景：#333；
}
#孩子1{
宽度：30%；
背景：3cf；
自我校准：基线；
}
#孩子2{
宽度：30%；
背景：#3fc；
}
#孩子3{
宽度：40%；
背景：#cf3；
}
#孩子{
宽度：100%；
背景:#fc3；
}
前{
保证金：0；
}

内容
内容
内容
内容
尝试设置
最小高度
或
最小宽度
。。。魔法

#容器{
显示器：flex；
身高：100%；
最小高度：0；
}

默认情况下，flex项不会收缩到其最小内容大小（最长单词或固定大小元素的长度）以下。要更改此设置，请设置“最小宽度”或“最小高度”属性。（见§4.5弹性物品的自动最小尺寸。）
可能相关：
高度：适合的内容
从2017年起是一项试验性功能，不应用于生产。例如，当前的Firefox不支持它。但Chrome确实更新了，先生。如果有任何不一致之处，请通知我。你不必仅仅因为我对你的答案做了就-1我的答案。我的答案很清楚。当你指出我原来的答案与浏览器不完全兼容时，我是否对你感到不满？我更新了我的答案，并提到是你指出了这一点。很抱歉你这么想。好吧，我-1想要你的答案的原始版本，以指出它实际上没有回答OP，并且有一些严重的问题。这就是-1按钮的作用。为了引起我的注意，你-我想要我完美的解决方案。是的，这看起来有点“愤恨”。你应该-1，我更新了它。回答问题和提供解决方案并不总是一回事。不，我不需要引起你的注意，我需要你查看更新。你就是引起我注意的那位先生，对吗？我不是唯一一个浏览过这一页的人，OP已经获得了2票。值得注意的是，并不是特别的
baseline
实现了这一点。例如，如果您希望在形成内容高度的同时将其居中，则可以使用
center
作为值。