From 06895a0e3bb000366f26f25e59ac7cfe19546550 Mon Sep 17 00:00:00 2001
From: Pierre-Denis Vanduynslager <pierre.denis.vanduynslager@gmail.com>
Date: Mon, 20 Mar 2017 16:56:58 -0400
Subject: [PATCH 1/2] Add missing flex-fill utility

---
 scss/utilities/_flex.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/scss/utilities/_flex.scss b/scss/utilities/_flex.scss
index 8e470384362f..1f898c1b18ca 100644
--- a/scss/utilities/_flex.scss
+++ b/scss/utilities/_flex.scss
@@ -16,6 +16,7 @@
     .flex#{$infix}-wrap         { flex-wrap: wrap !important; }
     .flex#{$infix}-nowrap       { flex-wrap: nowrap !important; }
     .flex#{$infix}-wrap-reverse { flex-wrap: wrap-reverse !important; }
+    .flex#{$infix}-fill         { flex: 1 1 auto !important; }
 
     .justify-content#{$infix}-start   { justify-content: flex-start !important; }
     .justify-content#{$infix}-end     { justify-content: flex-end !important; }

From 02f95589df09b1b37bb5af26d8db038c40ff6243 Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Sat, 20 Jan 2018 16:44:38 -0800
Subject: [PATCH 2/2] Document .flex-fill class in flex utils

---
 docs/4.0/utilities/flex.md | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/docs/4.0/utilities/flex.md b/docs/4.0/utilities/flex.md
index dd5bc47db03d..dabf2149dd0a 100644
--- a/docs/4.0/utilities/flex.md
+++ b/docs/4.0/utilities/flex.md
@@ -213,6 +213,23 @@ Responsive variations also exist for `align-self`.
 - `.align-self{{ bp.abbr }}-baseline`
 - `.align-self{{ bp.abbr }}-stretch`{% endfor %}
 
+## 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)
+
+{% example html %}
+<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</div>
+  <div class="p-2 flex-fill bd-highlight">Flex item</div>
+</div>
+{% endexample %}
+
+Responsive variations also exist for `flex-fill`.
+
+{% for bp in site.data.breakpoints %}
+- `.flex{{ bp.abbr }}-fill`{% endfor %}
+
 ## Auto margins
 
 Flexbox can do some pretty awesome things when you mix flex alignments with auto margins. Shown below are three examples of controlling flex items via auto margins: default (no auto margin), pushing two items to the right (`.mr-auto`), and pushing two items to the left (`.ml-auto`).