CSS ignores width of children when using aspect ratio - css

Question

I have encountered an issue regarding CSS's aspect-ratio on child elements.
I've been trying to style an element's width and height (both the same) to be equal to the height of the parent container. Using height: 100%; and aspect-ratio: 1; makes this work, however;
It seems the parent container ignores the children's resized width when using aspect-ratio, meaning the parent container ends up with the wrong width.
I've included a codepen illustrating the issue. Notice how the width does increase with each new element, but the width increase does not correspond to the actual width of the added elements.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
padding: 8px;
}
.container {
border: 1px solid red;
display: flex;
flex-direction: row;
align-items: stretch;
column-gap: 16px;
width: fit-content;
}
.button_container {
display: flex;
column-gap: 8px;
border: 1px solid green;
width: fit-content;
}
.button {
display: flex;
align-items: center;
justify-content: center;
border: 1px solid black;
}
.first_case {
height: 100%;
aspect-ratio: 1 / 1;
}
.second_case {
height: 100%;
width: 56px;
}
<p>Fixed width (this is how it should look)</p>
<div class="container">
<div>
Text<br/>More text<br/>Lots of text
</div>
<div class="button_container">
<div class="button second_case">
A
</div>
<div class="button second_case">
B
</div>
</div>
</div>
<p>Aspect ratio</p>
<div class="container">
<div>
Text<br/>More text<br/>Lots of text
</div>
<div class="button_container">
<div class="button first_case">
A
</div>
<div class="button first_case">
B
</div>
</div>
</div>
https://codepen.io/th3o4or/pen/ZEoqMrm