title: Evenly space absolutely positioned elements in a flexbox container
body: <p>When using flexbox on an element with absolutely positioned children - the child elements seem to adhere to the <code>justify-content</code> and <code>align-items</code> rules if the values are set to <code>center</code>. Like in the snippet below:</p>
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* { 
    margin: 0; 
    padding: 0; 
  }
  html { overflow: hidden; font-size: 0.7rem; }
  body { font-family: Arial; }
  section, div {
    display: flex;             /* Even though the child is absolutely positioned */
    justify-content: center;   /* The child is centered horizontally */
    align-items: center;       /* ...and the child is centered vertically */
    border-radius: 1rem; 
  }
  h2, section {
    width: 50%;
    margin: auto;
  }
  h2 {
    margin: 0.5rem auto;
    margin-top: 1rem;
    color: #444;
  }
  section {
    height: 10rem;
    padding: 1rem;
    background-color: #eee;
  }
  div {
    position: absolute; /* absolutely positioned child adheres to flexbox rules */
    width: 5rem;
    height: 5rem;
    background-color: rgba( 0,0,0,0.75 );
    color: #eee;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h2&gt;Flex-box Parent &amp;amp; Absolutely Positioned Child&lt;/h2&gt;
  &lt;section class='flex-parent'&gt;
    &lt;div&gt;50%&lt;/div&gt;
  &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>
  <p><strong>Flexbox rules seem to affect the child even though it is absolutely positioned as long as our flexbox values are <code>center</code>.</strong></p>
  <p>However when our flexbox values are something else, like <code>space-between</code> or <code>space-around</code> - the absolutely positioned elements seem to completely ignore these flexbox rules. Like below:</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-css lang-css prettyprint-override"><code>* { 
    margin: 0; 
    padding: 0; 
  }
  html { overflow: hidden; font-size: 0.6125rem; }
  body { font-family: Arial; }
  section, div {
    display: flex;
    justify-content: space-between; /* the positioned children ignore 'space-between'*/
    align-items: center;            /* the elements are just stacked on eachother */
    border-radius: 1rem;            /* in the second section */
  }
  h2, section {
    width: 50%;
    margin: auto;
  }
  h2 {
    margin: 0.5rem auto;
    margin-top: 1rem;
    color: #444;
  }
  section {
    padding: 1rem;
    background-color: #eee;
  }
  div {
    justify-content: center;
    width: 5rem; height: 5rem;
    background-color: rgba( 0,0,0,0.75 );
    color: #eee;
  }
  .absolute-parent { height: 5rem; }
  .absolute-parent div { position: absolute; }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h2&gt;Flex-box Parent&lt;/h2&gt;
  &lt;section class='flex-parent'&gt;
    &lt;div&gt;0%&lt;/div&gt;
    &lt;div&gt;25%&lt;/div&gt;
    &lt;div&gt;75%&lt;/div&gt;
    &lt;div&gt;100%&lt;/div&gt;
  &lt;/section&gt;
  
  &lt;h2&gt;Absolutely Positioned Children&lt;/h2&gt;
  &lt;section class='absolute-parent'&gt;
    &lt;div&gt;0%&lt;/div&gt;
    &lt;div&gt;25%&lt;/div&gt;
    &lt;div&gt;75%&lt;/div&gt;
    &lt;div&gt;100%&lt;/div&gt;
  &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>
  <h2>How do I make the children in the second <code>section</code> element space evenly in their container?</h2>