I'm trying to make a div
that fills all available height of its parent, while maintaining a 16/9 aspect ratio. However, it's filling the width and thus not keeping the aspect ratio I've set. Any advice on how to fix this?
<div >
<div ></div>
<div ></div>
</div>
.outer {
height: 100vh;
display: flex;
flex-direction: column;
}
.problem {
height: 200px;
}
.inner {
aspect-ratio: 16/9;
background-color: blue;
}
html,body {
margin: 0;
font-family: sans-serif;
}
JSFiddle: https://jsfiddle.net/cqhtb8sw/
CodePudding user response:
It's due to flexbox, you can add this in your inner styles:
height:100%;
width: min-content;