水平方向のオーバーフローで要素を垂直に整列する方法

Question

設定サイズ（この例では100x100）でdivを作成したいと考えています。

次に、divの中にx個の要素を追加できます。この例では、10個のボタンを10x10のサイズで縦に並べることができます。

これは、すべてのボタンが1つの列にあることを意味します。

次にサイズを変更して新しいサイズを80x80にすると、最初の8つのボタンが最初に表示され、最後の2つのボタンが新しい列になります。

私は

flex-wrap: wrap; 
display: flex; 
flex-direction: column; 
align-content: flex-start; 

それは縦に整列が、その後、私は、ボタンのサイズを変更すると下の上にいっているとしようとしています。

すべての要素を垂直に整列させるにはどうすればよいですか？高さが十分でない場合は、新しい列にオーバーフローするはずです。したがって、サイズに応じてxの列数になる可能性があるため、列数は設定されていません。

これはCSSで可能ですか？

Answer 1

コンテナに最大の高さを与えた場合にのみ動作すると思います。これはあなたが必要とするものですか？

.container { 
 
    flex-wrap: wrap; 
 
    display: flex; 
 
    flex-direction: column; 
 
    align-content: flex-start; 
 
    max-height: 100px; 
 
} 
 

 
.button { 
 
    width: 100px; 
 
    height: 10px; 
 
    border: solid thin black; 
 
}

<div class="container"> 
 
    <div class="button"></div> 
 
    <div class="button"></div> 
 
    <div class="button"></div> 
 
    <div class="button"></div> 
 
    <div class="button"></div> 
 
    <div class="button"></div> 
 
    <div class="button"></div> 
 
    <div class="button"></div> 
 
    <div class="button"></div> 
 
    <div class="button"></div> 
 
</div>