在使用display:flex布局时，容器高度未出现滚动条时为100%，但出现滚动条后高度不再为100%。

这个问题是由于 flex 容器 的高度计算机制导致的。当 flex 容器 没出现滚动条时，高度计算包括了其所有子元素的高度。但当出现滚动条时，子元素的高度不再影响 容器 的高度计算，因为滚动条导致 容器 的实际高度超过了视口高度，所以 容器 的高度就不再是 100% 了。

为了解决这个问题，我们需要使用 "min-height: 100vh" 来设置 容器 高度，同时设置 "overflow-y: auto" 用于显示滚动条。这样就可保证 容器 的高度在出现或不出现滚动条时均为 100%。

示例代码：

.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;   /* 设置容器高度为视口高度，最小为100% */
  overflow-y: auto;    /* 设置 overflow-y 用于显示滚动条 */
.item {
  flex: 1;             /* 设置子元素 flex 以占据所有可用空间 */