Tamanho mínimo do conteúdo em CSS Grid

Às vezes, ao criar um componente, você de repente percebe uma barra de rolagem horizontal estranha. Você continua tentando consertar tudo, apenas para finalmente perceber que o motivo é diferente. Quantas vezes você já se encontrou nesta situação?

Neste artigo, abordarei um problema complicado que pode custar horas de tentativa e erro. Tem a ver com layout de grade e achei que valeria a pena falar sobre isso.

Antes de começar o artigo, quero primeiro expressar algumas das nuances. Aqui estão algumas coisas a serem lembradas:

• Você se depara com um problema no meio do dia. Você está cansado e ainda tem muito trabalho a fazer.

  
  
  
  
  

• Você está com fome.

  
  
  
  
  

• É fácil perder a causa raiz do problema, pois não está relacionado ao componente em que você está trabalhando.

  
  
  
  
  

Com isso dito, vamos começar.

O que você precisa para conseguir no final

Para dar um pouco de contexto, aqui está o layout que estou tentando obter. Observe que há um contêiner de rolagem no final da seção principal.

Vamos definir o problema

Ao trabalhar em uma seção com um contêiner de rolagem, percebi a rolagem horizontal em toda a página , o que foi inesperado.

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)