フレックスアイテムの幅が縮小されています

Question

私はモバイルで水平にスクロール可能なナビゲーションメニューを作ろうとしています。これを行うには、flexboxを使ってやりたいのですが、モバイルビューを設定するとナビゲーション項目の幅が狭くなります。

flex-growとflex-basisプロパティをそれぞれ1と0に設定してみましたが、動作しませんでした。

この場合、ナビゲーションセクションにはダミーの名前が使用されていますが、その長さは異なる場合があります。

ul { 
 
    display: flex; 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
    background-color: #f2f2f2; 
 
    overflow-y: hidden; 
 
    overflow-x: auto; 
 
} 
 

 
li { 
 
    flex-grow: 1; 
 
    flex-basis: 0; 
 
    margin-left: 10px; 
 
}

<ul> 
 
    <li>Item 1</li> 
 
    <li>Item 2</li> 
 
    <li>Item 3</li> 
 
    <li>Item 4</li> 
 
    <li>Item 5</li> 
 
</ul>

Codepen sample

Answer 1

フレックスコンテナの初期設定がflex-shrink: 1であることに留意してください。

これは、デフォルトでフレックスアイテムが縮小できることを意味します。これにより、容器のオーバーフローを防ぐことができます。

この機能を無効にするには、flex-shrink: 0を使用してください。

だから、あなたのliのために、あなたは、この（速記版）を試すことができます。

flex: 1 0 auto (can grow, cannot shrink, initial main size based on content) 

詳細こちら：What are the differences between flex-basis and width?