css - Flexbox:flex 元素的最小高度与高度的区别?

标签 css flexbox height

<分区>

我想要一个最小高度为 100% 的 flex-element。 底部始终有一个子元素。 如果第一个 flex 子项中的内容比屏幕长,则站点应该可以正常滚动。

Here是我做的一支笔。

为什么它使用高度而不是最小高度?

height: 100%; // works

min-height: 100%; // doesn't works

最佳答案

如此处回答:CSS Height working but min-height doesn't work

Height can be inherited from positioned parents but not when these have a min-height property.

这意味着 .flexbox 不会从 wrapper 继承高度,因为 .wrapper 设置了最小高度。当您将 height 设置为 .wrapper 时,.flebox.grower 可以算出 100% 实际上意味着,然后它们会增长以适应屏幕。

注意:我会说链接答案的位置部分不正确,但引用部分是正确的。

关于css - Flexbox:flex 元素的最小高度与高度的区别?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46117033/

上一篇:javascript - 如何让 jQuery 动画只工作一次?

下一篇:HTML/CSS : Flexbox not working

相关文章:

html - 按钮周围有一个奇怪的边框,我该如何摆脱它?

html - 将 “Position: fixed” div 设置为与父 div 相同的宽度(flexbox 元素)

html - 响应式磁贴布局仅适用于宽度

jquery - Bootstrap collapse 可以隐藏,但不能显示

javascript - 更改有序列表中的编号?

jquery - 为什么我的 CSS 代码不能为表格制作背景颜色?

css - flex 方向 : row-reverse in react-native

html - flex 容器中的可滚动元素无法跨浏览器工作

objective-c - iPhone 4.0 与模拟器中显示的标签高度差异

css - 使用 CSS 显示比实际更大的图像