嵌套div不会使用flexbox增长

Question

我正在尝试构建一个表单，其中多选<select>元素根据可用空间增长或缩小。

但是，尽管设置为div.field（Code pad here）

，嵌套的flex 1 1 auto;拒绝更改大小

页面上的其他flexbox元素做正确的事情。 fieldset.members可以轻松扩展和折叠。

如果我将.field设置为具有固定高度，例如300px，select将展开以填充它而不会出现问题。

如果我将.field设置为height: 100%（据我所知，不应该让flexbox做正确的事情），Firefox会显示正确的结果，但Chrome有{ {1}}溢出其界限并占据整个页面。

我认为包含select元素的内容可能很有趣，所以我制作了test code pad with just a div而不是select。它仍然无法以与select元素相同的方式扩展。

我已经打了两个半天来对付这个问题了。谷歌没有让我到任何地方。有谁在这里知道为什么会出现这个问题以及如何解决它？

以下是不在键盘上的示例：

select

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