gpt4 book ai didi

css - 为什么嵌套的 flexboxes 在 Chrome 中不起作用?

转载 作者:行者123 更新时间:2023-11-28 11:56:49 35 4
gpt4 key购买 nike

<分区>

我有嵌套 flex 盒的代码:https://jsfiddle.net/tomrhodes/8pf1q706/我希望“内容 2”总是填满剩余空间。它适用于 Firefox,但它不适用于 Google Chrome,为什么它不起作用?

不要将一个 div 元素同时用作元素和 flexbox 的父元素,这一点非常重要,因此 - 我已经明确区分了这些 Angular 色。

html,
body {
height: 100%;
margin: 0;
border: solid magenta;
}

.row2 {
background: #f8f9fa;
margin-top: 20px;
flex: 0 1 auto;
-webkit-flex: 0 1 auto;
}

.container {
display: flex;
display: -webkit-flex;
flex-flow: column;
-webkit-flex-flow: column;
height: 100%;
border: solid blue;
}

.box {
display: flex;
flex-flow: column;
height: 100%;
border: solid blue;
}

.outsidebox {
display: flex;
flex-flow: column;
height: 100%;
border: solid purple;
}

.headerstyle {
flex: 0 1 auto;
border: solid green;
}

.contentstyle {
flex: 1 1 auto;
border: solid green;
}

.footerstyle {
flex: 0 1 40px;
border: solid green;
}

.wrapper {
flex: 1 1 auto;
border: solid yellow;
}
<div class="outsidebox">
<div class="box">
<div class="headerstyle">header</div>
<div class="contentstyle">
<div class="outsidebox">
<div class="headerstyle">header 2</div>
<div class="contentstyle">content 2</div>
<div class="footerstyle">footer 2</div>
</div>
</div>
<div class="footerstyle">footer</div>
</div>
</div>

35 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com