Nested div will not grow using flexbox

Question

I am trying to build a form where a multiple-choice <select> element grows or shrinks based on the space made available to it.

However, the div.field it is nested inside refuses to change size, despite being set to flex 1 1 auto; (Code pad here)

The other flexbox elements on the page do the right thing. fieldset.members has no trouble expanding and collapsing.

If I set .field to have a fixed height, say 300px, the select will expand to fill it without a problem.

If I set .field to height: 100% (which as far as I can tell should not be necessary to get flexbox to do the right thing), Firefox shows the correct result, but Chrome has the select overflowing its bounds and taking up the whole page.

I thought that maybe it was something funny to do with it containing a select element, so I made a test code pad with just a div instead of a select. It still fails to expand in the same fashion as the select element.

I have been hitting my head against this problem for two full days. Google has not gotten me anywhere. Does anyone here know why this problem is appearing and how to fix it?

Here's an example not on a codepad:

body {
  height: 100vh;
  width: 100vw;
  margin: 0;
  padding: 0;
}
.group-creator {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
}
.group-creator fieldset {
  flex: 0 0 auto;
}
.group-creator fieldset.members {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  background: snow;
}
.members legend {
  flex: 0 0 auto;
}
.members .field {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  background: white;
}
.members .field .inner {
  flex: 1 1 auto;
  background: lightblue;
}

<form class="group-creator">
  <fieldset class="members">
    <legend>Title</legend>
    <div class="field">
      <div class="inner">
        asdf
      </div>
    </div>
  </fieldset>
  <fieldset>
    <button type="submit">Create Conversation</button>
  </fieldset>
</form>