Illustrative Issue:
When space is limited, one row will start to flex while others remain static if they have enough space. Is there a way to make all rows flex when at least one needs to?
Instead of viewing it like this, I aim for it to be seen as this.
Additional Elements:
- "T": https://i.sstatic.net/W6iop.png
- "Box with X":
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 510 510"><title>x</title><line x1="5" y1="5" x2="505" y2="505" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:10px"/><line x1="5" y1="505" x2="505" y2="5" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:10px"/><rect x="5" y="5" width="500" height="500" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:10px"/></svg>
HTML structure:
<div className='container'>
<div className='container__side top'>
<div className='container__row nameone'>
<img className='container__type' src='...'/>
<svg className='container__item' ... />
// Each row has a varying number of svg items from an API fetch loop
</div>
<div className='container__row nametow'>
</div>
// etc
</div>
<div className='container__side bottom'>
</div>
</div>
SCSS styling:
.container {
background: white;
display: flex;
flex-direction: column;
padding: 1rem;
&__row {
display: flex;
}
&__type {
margin-right: 2rem;
width: 5rem;
height: 5rem;
object-fit: contain;
}
&__item {
padding: .5rem;
width: 7rem;
height: 7rem;
}
}