Flex-basis: 0px for .cell.auto

@DanielRuf replied to a similar topic on github. Looking for more information about eventual pitfalls in changing the implementaiton of .cell.auto, so trying to understand it better. Thanks!

I experience there are drawbacks with the current implementation of flex-basis: 0px; for .cell.auto, where I find that flex-basis: auto; works better in many cases.

I don’t want to overwrite it and cause a lot of problems that I don’t see upfront. Can anyone tell me about why flex-basis should be 0px for .auto?

Say that I have two cells that are auto/shrink, where the second one only shows if there is a link. If not the other cell should fill the entire “row”. In the current implementation this does not work, but if flex-basis is auto then it works. Also it works well if there is .grid-padding-x applied to the grid, so the behaviour changed based on that also which makes it harder to use for general solutions in my opinion.


<div class="cell auto">Title</div>
if(x) {
<div class="cell shrink">Link</div>
<div class="cell">Content</div>

Codepen where the differences are reproduced: