フレックスアイテムを固定幅にし、その兄弟をすべて同じサイズにします

Question

私は4つのリストアイテムを持っています.3つのアイテムを同じサイズにし、もう1つを300pxにします。

マイHTML：

<ul class="test"> 
     <li class="desc">Test description</li> 
     <li class="test">Test</li> 
     <li class="test">Test</li> 
     <li class="test">Test</li> 
    </ul> 

マイSASS：

 ul.test { 
     flex: 1 0 auto; 
     flex-direction: row; 
     display: flex; 
     } 

     li.desc{ 
     width: 300px; 
     } 

     li.test{ 
     background: green; 
     flex: 1 0 auto 
     } 

は私が最初のLiは、幅が300ピクセルであることを、その後、他の三つが同じサイズになりたいです。

Answer 1

ul.test { 
 
    display: flex; 
 
    padding: 0; 
 
    list-style: none; 
 
} 
 

 
li.desc { 
 
    width: 300px; 
 
    flex-shrink: 0;   /* disable default shrinking behavior */ 
 
    background-color: orange; 
 
} 
 

 
li.test { 
 
    flex: 1;     /* distribute free space evenly among items */ 
 
    background: lightgreen; 
 
} 
 
li{ border-right: 1px solid black; }

<ul class="test"> 
 
    <li class="desc">Test description</li> 
 
    <li class="test">Test</li> 
 
    <li class="test">Test</li> 
 
    <li class="test">Test</li> 
 
</ul>