Minimale Inhaltsgröße in CSS Grid

Manchmal fällt beim Erstellen einer Komponente plötzlich eine seltsame horizontale Bildlaufleiste auf. Sie versuchen immer wieder, alles zu reparieren, um schließlich zu erkennen, dass der Grund anders ist. Wie oft haben Sie sich in dieser Situation befunden?

In diesem Artikel werde ich ein heikles Problem behandeln, das Sie Stunden des Versuchs und Irrtums kosten kann. Es hat mit dem Rasterlayout zu tun und ich dachte, es könnte sich lohnen, darüber zu sprechen.

Bevor ich mit dem Artikel beginne, möchte ich zunächst einige der Nuancen ansprechen. Hier sind einige Dinge zu beachten:

• Sie haben mitten am Tag ein Problem. Sie sind müde und haben noch viel zu tun.

  
  
  
  
  

• Du bist hungrig.

  
  
  
  
  

• Es fällt Ihnen leicht, die Grundursache des Problems zu übersehen, da sie nicht mit der Komponente zusammenhängt, an der Sie arbeiten.

  
  
  
  
  

Nachdem dies gesagt ist, fangen wir an.

Was Sie am Ende brauchen

Um Ihnen einen kleinen Kontext zu geben, hier ist das Layout, das ich erreichen möchte. Beachten Sie, dass sich am Ende des Hauptabschnitts ein Bildlaufcontainer befindet.

Definieren wir das Problem

Während ich an einem Abschnitt mit einem Bildlaufcontainer arbeitete, bemerkte ich ein horizontales Bildlauf über die gesamte Seite , was unerwartet war.

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)