css在<div>多级父元素使用flex:1并在父元素不使用overflow: hidden;的情况下如何让<div>中的列表内容超出时不撑大父元素而是显示滚动条

在CSS中，`flex: 1`属性设置子元素flex grow（弹性增长）为1，意味着它会尝试占据尽可能多的可用空间。但是，如果你不希望`<div>`元素因为内容超出而撑大父元素，而是在内部显示滚动条，你需要对`<div>`元素进行一些特定的CSS设置。

你可以设置`<div>`元素的`overflow`属性为`auto`或`scroll`。这样，当`<div>`内部的内容超出其本身的大小时，滚动条会出现。`overflow: auto`会在必要时显示滚动条，而`overflow: scroll`则会一直显示滚动条，即使内容没有超出。此外，需要确保`<div>`元素有一个明确的高度或者最大高度（`max-height`）设置，否则它会默认拉伸以适应其内容。

这里是一个示例CSS设置：

.parent-div {
  /* 父元素的样式，不需要设置overflow: hidden */
}

.child-div {
  flex: 1; /* 子元素会尝试填充父元素的空间 */
  display: flex;
  flex-direction: column; /* 如果内容是垂直排列的 */
  overflow: auto; /* 或者使用 overflow: scroll */
  height: 200px; /* 设置一个固定高度，或者使用max-height来限制最大高度 */
}

.list-item {
  /* 列表项样式 */
}

在这个设置中，`.child-div`是需要显示滚动条的`<div>`元素，我们给它设置了`overflow: auto`和一个高度`height`，这样当`.list-item`（列表项）内容超出`.child-div`的高度时，滚动条就会出现。