Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Prevent .row from shrinking in flex container #30940

Merged
merged 2 commits into from
Jun 8, 2020

Conversation

ffoodd
Copy link
Member

@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
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
Member 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;?

@MartijnCuppens
Copy link
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
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