Why flex-shrink 0 for all columns? #37951

chalin · 2023-01-25T11:52:07Z

chalin
Jan 25, 2023

Hi all,

When the v5 grid system was introduced (#28517), position: relative was removed because it was felt that it didn't make sense to impose that for all columns:

[v4] Why are all col classes 'position: relative'? #25254

Does anyone know why the default flex-shrink value (of 1) was overridden with flex-shrink: 0 for all columns¹. See below for relevant excerpts of #28517.

Thanks!

bootstrap/scss/mixins/_grid.scss

Lines 16 to 28 in 1299b16

    
           @mixin make-col-ready() { 
        
             // Add box sizing if only the grid is loaded 
        
             box-sizing: if(variable-exists(include-column-box-sizing) and $include-column-box-sizing, border-box, null); 
        
             // Prevent columns from becoming too narrow when at smaller grid tiers by 
        
             // always setting `width: 100%;`. This works because we set the width 
        
             // later on to override this initial width. 
        
             flex-shrink: 0; 
        
             width: 100%; 
        
             max-width: 100%; // Prevent `.col-auto`, `.col` (& responsive variants) from breaking out the grid 
        
             padding-right: calc(var(--#{$prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list 
        
             padding-left: calc(var(--#{$prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list 
        
             margin-top: var(--#{$prefix}gutter-y); 
        
           }

bootstrap/scss/_grid.scss

Lines 12 to 18 in 1299b16

    
           .row { 
        
             @include make-row(); 
        
             > * { 
        
               @include make-col-ready(); 
        
             } 
        
           }

It's actually added to all .row children via .row > *. ↩

chalin · 2023-01-25T14:37:05Z

chalin
Jan 25, 2023
Author

Regardless of the answer to the above, it might make sense to add this (flex-shrink being 0) to the migration guide under Grid updates, along side the bullet that says that "Columns no longer have position: relative applied". WDYT?

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Bootstrap

Why flex-shrink 0 for all columns? #37951

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Bootstrap

Why flex-shrink 0 for all columns? #37951

Uh oh!

chalin Jan 25, 2023

Footnotes

Replies: 1 comment

Uh oh!

chalin Jan 25, 2023 Author

chalin
Jan 25, 2023

chalin
Jan 25, 2023
Author