flex布局下，控件如何自动获得剩余高度

在 Flex 布局中，如果你想让某个控件自动获取剩余的高度，你可以通过以下几种方法实现：

1. **设置 `flex-grow`**：这是 Flex 基础特性之一，可以让元素按比例增长其可用空间。例如，对于一个包含多个项目的 Flex 容器，给那个希望自动获取剩余高度的元素设置 `flex-grow: 1;`，其余元素的 `flex-grow` 值设为 0 或者没有，那么该元素将尽可能地分配剩下的空间。

.item {
  flex: 1;
}

2. **使用 `flex-shrink` 和 `flex-basis`**：如果你希望元素在空间不足时收缩而不是拉伸，可以在 `flex-basis` 中设置一个相对较小的值，并使用 `flex-shrink: 1;` 来允许元素缩小。这样，在高度不够的情况下，元素将缩小以适应剩余空间。

.item {
  flex: 1 1 0px; /* flex-grow: 1, flex-shrink: 1, flex-basis: 0 (auto) */
}

3. **设置 `height: 100%`**：如果容器的 `height` 已经确定并且设置了 `min-height`，那么直接给控件设置 `height: 100%;` 就能使其填满剩余高度。

.parent {
  min-height: calc(100vh - [other-flex-items-height]);
  display: flex;
}

.child {
  height: 100%;
}

这里需要注意的是，计算元素实际高度前应先考虑其他 Flex 子项占用的高度。