フレックスボックスがフレックスボックスと同じ高さにならないようにするにはどうすればいいですか？

Question

私は大きなフレックスコンテナを持っています。内部には2つのフレックスコンテナがあります。それらのそれぞれに、いくつかの行のリスト項目があります。問題は、アイテム数の少ないものが、他のアイテムの高さに合わせて伸びているため、要素間に余裕があることです。

Answer 1

内側フレックスボックスにalign-self: flex-start;を追加する必要があります。これは、ここではデフォルト値align-self: stretch;

を却下例です。

#outsideFlexBox { 
 
    display: flex; 
 
} 
 

 
.insideFlexBox { 
 
    display: flex; 
 
    align-self: flex-start; 
 
    margin: 10px; 
 
    padding: 10px; 
 
    background-color: #33FFCC; 
 
}

<div id="outsideFlexBox"> 
 
    <div class="insideFlexBox"> 
 
    <ul> 
 
     <li>Item 1</li> 
 
     <li>Item 2</li> 
 
     <li>Item 3</li> 
 
     <li>Item 4</li> 
 
     <li>Item 5</li> 
 
    </ul> 
 
    </div> 
 
    <div class="insideFlexBox"> 
 
    <ul> 
 
     <li>Item 1</li> 
 
     <li>Item 2</li> 
 
     <li>Item 3</li> 
 
    </ul> 
 
    </div> 
 
</div>

が、これは助けを願っています。