css - aspect-ratio not affecting parent size on ioswebkit - Stack Overflow

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:

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.

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

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:

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?

• css
• cross-browser

Share Improve this question Follow asked Jan 30 at 18:17 marianydevmarianydev 8911 gold badge22 silver badges66 bronze badges 1

• By "webkit", do you mean Safari? - stackoverflow.com/search?q=aspect-ratio+Safari – Paulie_D Commented Jan 30 at 18:28

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

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>