csscross-browser

aspect-ratio not affecting parent size on ios/webkit

I'm applying the aspect-ratio CSS property to the children of a container. The children are being appropriately sized. However, the children's parent is not being sized to fit it's content.

This seems to only be the case for webkit. On Chrome, it works as expected. I've created an example

Chrome Result:

Chrome Result

Webkit Result:

Webkit Result

Notice how, in Chrome, the container (blue) sizes to fit the content (purple), as expected.

However, in Webkit, the container does not fit to its content. Presumably, because the content is being sized with aspect-ratio.

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

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

But why does this happen? And how can I work around it?

Solution

  • In Safari, you have to specify the height explicitly. In this case .container should have 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>