Trying to maintain a 1:1 aspect ratio for a div by using an image. The goal is for the div to fill the available height within a flex-container while the container's width adjusts to fit its content.
The square-div displays with correct dimensions, but the parent div does not respect its width.
Although setting a fixed width for the image resolves the parent div width issue, it is not feasible as the image needs to resize dynamically. Any suggestions?
.parent {
align-items: center;
background-color: black;
border-radius: 12px;
box-sizing: border-box;
display: flex;
flex-direction: column;
height: 100%;
justify-content: flex-start;
overflow: hidden;
padding: 16px;
position: relative;
width: fit-content;
z-index: 1;
}
.header,
.footer {
height: 48px;
width: 100%;
}
.square {
box-sizing: border-box;
flex-grow: 1;
display: block;
position: relative;
width: auto;
}
.square>img {
display: block;
height: 100%;
width: auto;
}<div class="parent">
<div class="header"></div>
<div class="square">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" width="100" height="100" />
</div>
<div class="footer"></div>
</div>https://i.sstatic.net/L7pL9.jpg
Other attempted solutions:
Setting the parent div to width: auto yielded no success.
Setting the parent div to display: inline-flex had no effect.
Setting the parent div to display: table did not resolve the issue.