如何使flexbox元素居中并使其生长以填充不等的剩余空间？

Question

看看这个Codepen：https://codepen.io/devinhalladay/pen/eyKBpY

（上图是Codepen的屏幕截图。中心线表示页面中心的位置）

我需要这样做，以便H3在页面中居中，尽管其他元素的宽度不相等，左边和右边的线条必须填充两边的所有可用空间。

HTML：

<div class="container">
  <a href="#">Title</a>
  <h3>Subtitle</h3>
  <nav>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </nav>
</div>

CSS：

.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;
  }
}