如果一个兄弟姐妹需要弯曲，则将弯曲应用于所有兄弟姐妹

Question

Example problem:

• big: https://i.imgur.com/fVUSqJN.png
• small: https://i.imgur.com/6DOaBIf.png

When there is no enough space, one row starts to flex but others won't if they still have enough space, can I make it so every row flex if at least one has to?

So instead of this I want this

Assets:

• "T": https://i.imgur.com/KxoIf6b.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:

<div className='container'>
  <div className='container__side top'>
    <div className='container__row nameone'>
      <img className='container__type' src='...'/>
      <svg className='container__item' ... />
      // each row have different amount of svg items, because it loop throw array fecthed from api
    </div>
    <div className='container__row nametow'>
    </div>
    // etc
  </div>
  <div className='container__side bottom'>
  </div>
</div>

scss:

.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;
   }
}

Answer 1

You can just add flex-shrink: 0; to &__item .

You final CSS should look like this:

&__item {
    padding: .5rem;
    width: 7rem;
    height: 7rem;
    flex-shrink: 0;
}