我正在将aptive-ratio css属性应用于容器的子女。孩子们的身材适当。但是,孩子的父母并没有适合它的尺寸。 webkit似乎只是这种情况。在Chrome上,它可以按预期工作。我创建了一个示例

问题描述 投票:0回答:1

webkit结果:

lotice在镀铬中如何按预期的是容器(蓝色)尺寸以适合内容(紫色)。 ,在Webkit中,该容器不符合其内容。据推测,由于内容的尺寸与方面相关。Chrome Result

https://codepen.io/mariany/full/xbkbrdj

Webkit Result

*, *::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>

但是为什么会发生这种情况?我该如何处理呢?

在Safari中,您必须明确指定
height
。在这种情况下,
.container
应该具有
height:100%

css cross-browser
1个回答
0
投票

*, *::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>

© www.soinside.com 2019 - 2024. All rights reserved.