Bootstrap: Docs about flex-fill

[ysds]

https://getbootstrap.com/docs/4.1/utilities/flex/#fill

Use the .flex-fill class on a series of sibling elements to force them into equal widths while taking up all available horizontal space. Especially useful for equal-width, or justified, navigation.

This document might cause misunderstanding.
They are not the same width, they actually depend on the width of their content.

demo: https://codepen.io/anon/pen/jKoOad

I would like to make a PR, but I am not a native speaker, so I ask for someone's help.

[719media]

Agreed. Personally, I find the cases for equal width content (flex: 1 1 0) more prevalent than what this does (flex: 1 1 auto). I thought .flex-fill would do the former, but was surprised that it did the latter.

[kylefox]

Yup, after much head-scratching I realized the docs are wrong. flex-fill will fit to content.

[poke]

I have to agree that this is really confusing in the documentation. To make matters worse, the example is using the same content for all of the three boxes, so it looks as if the items will all have the same width.

In my opinion, it would have been much more natural to make this a flex: 1 (with a flex-basis: 0) to make the boxes actually fill the available width equally. I think that is much more likely what people expect from a “flex-fill” class.

[dnyg]

I don't think there's a big need for .flex-fill as it is now - it is almost never what users want and the documentation is very confusing.

If .flex-fill can't be changed due to backwards-compatibility issues, it would be nice to introduce a .flex-even class with flex: 1 (see this question on Stack Overflow)

[brnrd87]

The .flex-fill is definitely worth keeping, it may come in handy if you want a 100% width horizontal menu with equal space distribution. However, I would endorse the addition of a .flex-even class with flex: 1 1 0%; for real equal widths. At least I use both...