CSSグリッドの最小コンテンツサイズ

コンポーネントを作成するときに、突然奇妙な水平スクロールバーに気付くことがあります。あなたはすべてを修正しようとし続けますが、最終的には理由が異なることに気づきます。このような状況に陥ったことは何回ありますか？

この記事では、試行錯誤に何時間もかかる可能性のあるトリッキーな問題について説明します。それはグリッドレイアウトと関係があり、私はそれについて話す価値があるかもしれないと思いました。

記事を始める前に、まずいくつかのニュアンスを述べたいと思います。覚えておくべきことがいくつかあります。

• あなたは一日の途中で問題にぶつかります。あなたは疲れていて、まだやるべきことがたくさんあります。

  
  
  
  
  

• あなたはお腹がすいてる。

  
  
  
  
  

• 問題の根本原因は、作業中のコンポーネントとは関係がないため、見逃しがちです。

  
  
  
  
  

それでは、始めましょう。

あなたが最後に得る必要があるもの

少しコンテキストを与えるために、これが私が達成しようとしているレイアウトです。メインセクションの終わりにスクロールコンテナがあることに注意してください。

問題を定義しましょう

スクロールコンテナのあるセクションで作業しているときに、ページ全体を水平方向にスクロールしていることに気づきました。これは予想外のことでした。

display: flex -, . , overflow-x: auto, X.

.section {
  display: flex;
  overflow-x: auto;
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

. , , .

, , . main - .

, ? , :

• overflow-x: hidden?

  
  
  
  
  

• - ?

  
  
  
  
  

, — . , . — . .

, , CSS (, - - ) , - .

, ? main aside:

<div class="wrapper">
  <main>
    <section class="section"></section>
  </main>
  <aside></aside>
</div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

@media (min-width: 1020px) {
  .wrapper {
    display: grid;
    grid-template-columns: 1fr 248px;
    grid-gap: 40px;
  }
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

1fr. , gap. 100% . , — auto. - ( ).

, . minmax().

.wrapper {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 248px;
  grid-gap: 40px;
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

. , . CSS-, .main:

1. min-width: 0;

   
   
   
   
   

2. , overflow: hidden;

   
   
   
   
   

. , overflow: hidden.

, , . overflow: hidden .

, , .

, CSS Grid, 21 2021

(Ahmad Shadeed, The Minimum Content Size In CSS Grid, Jan 27, 2021)