Fill remaining vertical space using only CSS when elements wrap using Flexbox

I'm trying to create a responsive view without the use of a media query. The layout of my view has a content div and a footer div. The footer div should always be fixed at the bottom of the view, and the content div should expand vertically to fill the remaining space.

Within the content div will be a left div and a right div. When the width of the view is small, the left div should stack above the right div to form a single column layout. Here's a screenshot of the single column layout. After some defined width, the right div should move next to the left div to form a two column layout. Here's a screenshot of the two column layout.

The issue I'm having is when we're in a single column layout. The right div should expand vertically to fill the remaining space of the content div. That means, regardless of the height of the view, the height of the left div should be large enough to only contain its contents and the height of the right div should expand vertically to fill the remaining space. Here's a screenshot of the desired behavior. However, that's not the behavior I am seeing. Here's a screenshot of the current behavior.

My current approach is to use Flexbox, but using any combination of align-item, align-self, and align-content doesn't achieve the desired behavior. I'm currently using align-self: flex-start; on the left div to overwrite the default stretch behavior, but the right div doesn't want to expand vertically to fill the remaining space; Flexbox seems to be allocating space for the left div when it shouldn't.

Thoughts? Here's a link to the CodePen.

#editor {
  display: flex;
  flex-flow: column nowrap;
  border: 1px solid black;
  resize: both;
  overflow: auto;
  min-height: 500px;
}

#content {
  display: flex;
  flex-wrap: wrap;
  flex: 1;
  margin-left: -8px;
}

#footer {
  height: 50px;
  background-color: red;
}

#leftPane {
  flex: 1 500px;
  margin-left: 8px;
  align-self: flex-start;
  background-color: green;
}

#rightPane {
  flex: 1 750px;
  min-height: 500px;
  margin-left: 8px;
  background-color: blue;
}

<div id="editor">
  <div id="content">
    <div id="leftPane">
      <p>This element should expand vertically to fit its contents</p>
    </div>
    <div id="rightPane">
      <p>This element should expand vertically to fill all remaining space</p>
    </div>
  </div>
  <div id="footer">
    <p>This is the footer</p>
  </div>
</div>