Skip to content

Prevent .row from shrinking in flex container#30940

Merged
MartijnCuppens merged 2 commits intomasterfrom
master-fod-fix-grid
Jun 8, 2020
Merged

Prevent .row from shrinking in flex container#30940
MartijnCuppens merged 2 commits intomasterfrom
master-fod-fix-grid

Conversation

@ffoodd
Copy link
Copy Markdown
Contributor

@ffoodd ffoodd commented Jun 2, 2020

Fixes #30840

Working around this issue, this seems the simplest and cleanest way to prevent row from shrinking.

Didn't notice any drawback yet, since it'll only be applied if .row's parent is a flex container.

FYI it'll still break if .row's parent is display: flex but doesn't allow wrapping. Don't know if it should be adressed at all, though.

@mdo @MartijnCuppens you know rows and history better than I do, so feel free to drop this if it looks wrong.

@MartijnCuppens
Copy link
Copy Markdown
Member

Why do we set the flex-basis to 100% and than use flex-grow to grow anyway? just flex-grow should do the trick?

@ffoodd
Copy link
Copy Markdown
Contributor Author

ffoodd commented Jun 5, 2020

flex-grow: 1 does the job, indeed.

I always use the flex shorthand as recommend by the specs. FWIW, after reading flex common patterns, flex: 1; would do the job, too.

Do we stick with flex-grow: 1;?

@XhmikosR XhmikosR requested a review from MartijnCuppens June 7, 2020 13:47
@MartijnCuppens
Copy link
Copy Markdown
Member

Do we stick with flex-grow: 1;?

Yeah we should. 100% doesn't make any sense since the width is actually more due to the negative margins.

@MartijnCuppens
Copy link
Copy Markdown
Member

Scratch that, a flex-basis of 100% might be useful if you're adding multiple .rows in a flex container.

@MartijnCuppens MartijnCuppens changed the title Prevent .row from shrinking in .navbar > .container Prevent .row from shrinking in flex container Jun 8, 2020
@MartijnCuppens MartijnCuppens merged commit 92a728e into master Jun 8, 2020
@MartijnCuppens MartijnCuppens deleted the master-fod-fix-grid branch June 8, 2020 17:47
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

row width is not correct

4 participants