title: How can I center a flexbox element and make it grow to fill unequal remaining space?
body: <p>Take a look at this Codepen: <a href="https://codepen.io/devinhalladay/pen/eyKBpY" rel="nofollow noreferrer">https://codepen.io/devinhalladay/pen/eyKBpY</a></p>
  
  <p><a href="https://i.stack.imgur.com/OnObo.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OnObo.png" alt="Screenshot"></a>
  (The image above is a screenshot of the Codepen. The center line indicates where the center of the page is)</p>
  
  <p><strong>I need to make it so that the <code>H3</code> is centered within the page despite unequal widths of the other elements, and the lines on the left and right must fill all the available space on either side.</strong></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;a href="#"&gt;Title&lt;/a&gt;
    &lt;h3&gt;Subtitle&lt;/h3&gt;
    &lt;nav&gt;
      &lt;ul&gt;
        &lt;li&gt;Item 1&lt;/li&gt;
        &lt;li&gt;Item 2&lt;/li&gt;
        &lt;li&gt;Item 3&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/nav&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.container {
    max-width: 1200px;
    margin: auto;
    height: 4em;
  
    display: flex;
    align-items: center;
  }
  
  h3 {
    display: flex;
    flex: 1;
  }
  
  h3:before,
  h3:after {
    background-color: #ddd;
    content: '\a0';
    flex-grow: 1;
    height: 1px;
    position: relative;
    top: 0.5em;
  }
  
  // Non-essential styles
  ul {
    list-style-type: none;
    padding: 0;
    li {
      display: inline-block;
    }
  }
  </code></pre>