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.

@ffoodd ffoodd requested a review from a team as a code owner June 2, 2020 12:45
@mdo mdo added this to Inbox in v5 via automation Jun 4, 2020
@mdo mdo added this to Inbox in v4.5.1 via automation Jun 4, 2020
v5 automation moved this from Inbox to Approved Jun 4, 2020
@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
v5 automation moved this from Approved to Shipped Jun 8, 2020
@MartijnCuppens MartijnCuppens deleted the master-fod-fix-grid branch June 8, 2020 17:47
@XhmikosR XhmikosR moved this from Inbox to Cherry picked in v4.5.1 Jun 9, 2020
@XhmikosR XhmikosR moved this from Cherry picked/Manually backported to Shipped in v4.5.1 Jun 24, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
No open projects
v4.5.1
  
Shipped
v5
  
Shipped
Development

Successfully merging this pull request may close these issues.

row width is not correct
4 participants