flex中子项flex:1；时，如果出现滚动条，而不是无限撑大

css中flex布局，某个flex:1;，如果超出最大可支配高度，如果让该子项目出现滚动条，而不是无限撑大呢？

• 方案一：通过设置该子项的 max-height 和 overflow 属性来实现

  .flex-container {  
    display: flex;  
    flex-direction: column; /* 假设我们想要垂直排列子项 */  
    height: 100vh; /* 假设容器占据整个视口的高度 */  
  }  
    
  .flex-item {  
    flex: 1; /* 子项将占据所有可用空间 */  
    max-height: 50vh; /* 设置最大高度为视口高度的一半 */  
    overflow-y: auto; /* 当内容超出最大高度时，显示垂直滚动条 */  
    /* 你可以根据需要添加 padding, margin, border 等其他样式 */  
  }

•  方案二：自适应可支配空间，不设置max-height

1. 确保容器有固定的高度：Flex 布局的子项会尝试填充其父容器的可用空间。如果父容器没有固定的高度，那么子项可能就不会出现滚动条，因为它可以无限扩展。

2. 使用 min-height 和 flex-grow：你可以为 .flex-item 设置一个 min-height（如果需要的话），并使用 flex-grow: 1; 而不是 flex: 1;（flex: 1; 是 flex-grow: 1; flex-shrink: 1; flex-basis: 0%; 的简写）。这样，子项会尝试填充剩余空间，但不会超过其父容器的总高度。

3. 为子项设置 overflow：当子项的内容超出其分配的空间时，设置 overflow-y: auto;（或 overflow: auto;）将确保子项在垂直方向上显示滚动条。

示例 CSS 如下：

.flex-container {  
  display: flex;  
  flex-direction: column; /* 假设我们想要垂直排列子项 */  
  height: 100vh; /* 假设容器占据整个视口的高度 */  
}  
  
.flex-item {  
  flex-grow: 1; /* 子项将占据所有可用空间 */  
  /* min-height: ...; /* 如果需要，可以设置最小高度 */  
  overflow-y: auto; /* 当内容超出分配的空间时，显示垂直滚动条 */  
  /* 你可以根据需要添加 padding, margin, border 等其他样式 */  
}

在这个例子中，.flex-item 会尝试填充 .flex-container 的剩余空间，但如果其内容超出了这个空间，滚动条就会出现。由于我们没有为 .flex-item 设置 max-height，它将能够扩展到其父容器的整个高度（减去其他兄弟元素占据的空间）