webkit结果:
lotice在镀铬中如何按预期的是容器(蓝色)尺寸以适合内容(紫色)。
,在Webkit中,该容器不符合其内容。据推测,由于内容的尺寸与方面相关。
*,
*::after,
*::before {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
}
.wrapper {
width: 100%;
height: 100%;
display: flex;
}
.container {
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: column;
gap: 3px;
background: lightskyblue;
padding: 20px;
}
.child {
display: flex;
justify-content: center;
align-content: center;
position: relative;
height: 50%;
aspect-ratio: 1/1;
background: purple;
border: 2px solid;
border-radius: 2px;
}
.other {
background: orangered;
flex-grow: 1;
}
<div class="wrapper">
<div class="container">
<div class="child"></div>
<div class="child"></div>
</div>
<div class="other">
</div>
</div>
但是为什么会发生这种情况?我该如何处理呢?
height
。在这种情况下,.container
应该具有height:100%
:
*,
*::after,
*::before {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
}
.wrapper {
width: 100%;
height: 100%;
display: flex;
}
.container {
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: column;
gap: 3px;
background: lightskyblue;
padding: 20px;
box-sizing: border-box;
height: 100%;
}
.child {
display: flex;
justify-content: center;
align-content: center;
position: relative;
height: 50%;
aspect-ratio: 1/1;
background: purple;
border: 2px solid;
border-radius: 2px;
}
.other {
background: orangered;
flex-grow: 1;
}
<div class="wrapper">
<div class="container">
<div class="child"></div>
<div class="child"></div>
</div>
<div class="other">
</div>
</div>