title: Why is flex-fill not creating equal width in bootstrap?
body: <p>According to <a href="https://getbootstrap.com/docs/4.1/utilities/flex/#fill" rel="noreferrer">Bootstrap 4.1 documentation</a> regarding the <code>.flex-fill</code> class</p>
  
  <blockquote>
    <p>Use the .flex-fill class on a series of sibling elements to force them into equal widths while taking up all available horizontal space. </p>
  </blockquote>
  
  <p>I've made an example using <code>.flex-fill</code> on 3 siblings, but they are not forced into equal width.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/&gt;
  
  &lt;div class="d-flex"&gt;
    &lt;div class="flex-fill"&gt;Item&lt;/div&gt;
    &lt;div class="flex-fill"&gt;Another&lt;/div&gt;
    &lt;div class="flex-fill"&gt;Last item&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>How can that be?</p>