html - CSS3 flex 盒 : flexboxes inside flexboxes aren't contained inside their parents

标签 html css flexbox

我面临着让一个相当复杂的网络应用程序在 HTML/CSS 中工作的问题。我发现 Flexbox 存在很多问题,这似乎可以解决我的问题。我试图了解我做错了什么或者 flex 盒的限制是什么。我只在 Chrome 中工作,所以这会有所帮助。

我不断看到两个问题: - 盒子不知道如何容纳里面的 child 的高度/宽度 - parent 不包含 child 盒子。本期图片:

screenshot of problem

这里没有发布代码而是 JSFiddle:http://jsfiddle.net/dex3703/ryCQq/ 不完全完整,但我希望你能明白我的想法。 CSS 由三个不同的文件组合而成。

谢谢!

最佳答案

想通了。所有容器必须设置为显示:box(或-webkit-box等)。如果你想要一个盒子里面有一个盒子,那么它们都必须是盒子。希望这对某人有帮助!

关于html - CSS3 flex 盒 : flexboxes inside flexboxes aren't contained inside their parents,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8001350/

相关文章:

html - 动态多行布局,CSS 网格容器必须占用其 Flexbox 容器中的所有空间以及第一行占用的剩余空间

css - 为什么具有 z-index 值的元素不能覆盖其子元素?

css3 Flexbox 3列布局小宽度,拉伸(stretch)中间一和宽度: max-200px on right

html - 内容溢出 flex 容器

javascript - Ajax 调用似乎无法识别我的文件

jquery - html2canvas - 安全错误 : The operation is insecure

javascript - 如何减少替代样式表的加载时间?

html - 谷歌浏览器缺少右双边框

jquery - 战地风云3标志效果

html - flex 元素中的图像导致等宽断裂