I am attempting to create a flexbox with an SVG element as a child. The goal is for the SVG element to be as large as possible in terms of both width and height.
.grid {
display: grid;
grid-template-columns: 2fr 2fr 2fr;
gap: 1em;
}
.parent {
aspect-ratio: 1 / 1;
background: lightgrey;
display: flex;
flex-direction: column;
}
.box {
flex: 1;
display: flex;
flex-direction: column;
}
svg {
flex: 1;
}<div class="grid">
<div class="parent">
<div>no box around SVG</div>
<div>SVG height larger than its width</div>
<svg viewBox="0 0 1 3">
<path d="M0 0 L1 3 L0 3" />
</svg>
<div>SVG has maximum height</div>
<div>and centers horizontally</div>
</div>
<div class="parent">
<div>no box around SVG</div>
<div>SVG width equal to its height</div>
<svg viewBox="0 0 1 1">
<path d="M0 0 L1 1 L0 1" />
</svg>
<div>SVG has maximum height</div>
<div>and centers horizontally</div>
</div>
<div class="parent">
<div>no box around SVG</div>
<div>SVG width larger than its height</div>
<svg viewBox="0 0 3 1">
<path d="M0 0 L3 1 L0 1" />
</svg>
<div>SVG has maximum width</div>
<div>and centers vertically</div>
</div>
<div class="parent">
<div>box around SVG</div>
<div>SVG height greater than its width</div>
<div class="box">
<svg viewBox="0 0 1 3">
<path d="M0 0 L1 3 L0 3" />
</svg>
</div>
<div>SVG has maximum height and width</div>
<div>but should be equal to box 1</div>
</div>
<div class="parent">
<div>box around SVG</div>
<div>SVG width equal to its height</div>
<div class="box">
<svg viewBox="0 0 1 1">
<path d="M0 0 L1 1 L0 1" />
</svg>
</div>
<div>SVG has maximum height and width</div>
<div>but should be equal to box 2</div>
</div>
<div class="parent">
<div>box around SVG</div>
<div>SVG width greater than its height</div>
<div class="box">
<svg viewBox="0 0 3 1">
<path d="M0 0 L3 1 L0 1" />
</svg>
</div>
<div>SVG has maximum width</div>
<div>and is vertically centered like box 3</div>
</div>
</div>While the first three boxes are functioning properly, the last three boxes are not behaving the same way. It appears that there is another flexbox affecting their behavior. How can I make the last set of boxes work the same way as the initial set?
It seems that the last three boxes always occupy the entire width available to them.