Skip to content

Commit

Permalink
Change erroneous documentation for .flex-fill (#27265)
Browse files Browse the repository at this point in the history
The current documentation for .flex-fill indicated that the flex
items would have equal widths, regardless of content. This update
ensures that the documentation reflects the fact that the width
of the flex items depends on their actual content.
  • Loading branch information
nicohvi authored and XhmikosR committed Oct 21, 2018
1 parent 1f1308b commit 345f26a
Showing 1 changed file with 2 additions and 2 deletions.
4 changes: 2 additions & 2 deletions site/docs/4.1/utilities/flex.md
Original file line number Diff line number Diff line change
Expand Up @@ -219,11 +219,11 @@ Responsive variations also exist for `align-self`.

## 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]({{ site.baseurl }}/docs/{{ site.docs_version }}/components/navs/#working-with-flex-utilities).
Use the `.flex-fill` class on a series of sibling elements to force them into widths equal to their content (or equal widths if their content does not surpass their border-boxes) while taking up all available horizontal space.

{% capture example %}
<div class="d-flex bd-highlight">
<div class="p-2 flex-fill bd-highlight">Flex item</div>
<div class="p-2 flex-fill bd-highlight">Flex item with a lot of content</div>
<div class="p-2 flex-fill bd-highlight">Flex item</div>
<div class="p-2 flex-fill bd-highlight">Flex item</div>
</div>
Expand Down

0 comments on commit 345f26a

Please sign in to comment.