Horizontally center middle element in 3 column row

Question

I have a 3 column row with 3 varying widths. Using flex, is there a way (css only) to horizontally center the middle column in relation to the page, without giving the outer elements fixed widths.

section {
  display: flex;
  width. 100%;
  align-items: center;
  justify-content: space-between;
}

div {
  position: fixed;
  top: 0;
  left: calc(50% - 1px);
  height: 100%;
  width: 2px;
  background: red;
}

<section>
  <aside>short</aside>
  <h2>Center</h2>
  <aside>longer element</aside>
</section>

<div></div>