如何让高度大于父盒子的子元素可以再父元素中滑动

要实现一个高度超过父盒的子元素在其父元素内部垂直滚动，通常可以在CSS中使用`overflow-y`属性和`scrollbar-gutter`样式。这里是一个简单的示例：

1. **设置父容器**:

   .parent-container {
     position: relative; /* 确保父元素定位 */
     height: contain; /* 或者给定一个固定高度 */
     overflow-y: auto; /* 添加垂直滚动条 */
     scrollbar-width: thin; /* 设置滚动条宽度 */
     scrollbar-color: #ccc white; /* 滚动条颜色 */
   }

2. **处理滚动条样式**:
如果需要自定义滚动条的外观，可以使用伪元素`: scrollbar()`：

   ::-webkit-scrollbar { /* 对于Webkit内核浏览器（如Chrome和Safari） */
     width: var(--scrollbar-width);
   }

   ::-webkit-scrollbar-thumb {
     background-color: #ccc;
     border-radius: 4px;
   }

   ::-webkit-scrollbar-track {
     background-color: white;
   }

   /* 可能还需要为Firefox和Edge添加类似的支持 */
   scrollbar-width: none;
   -ms-overflow-style: none;

   /* 使用前缀覆盖默认滚动条样式 */
   scrollbar-track:-webkit-scrollbar-track,
   scrollbar-thumb:-webkit-scrollbar-thumb {
     scrollbar-color: #ccc white;
   }

3. **保持内容滚动**:
子元素应该脱离文档流，比如通过浮动、绝对定位或Flexbox/Grid布局，以便它可以超出父元素的高度：

   .child-element {
     float: left; /* 或者 position:absolute 或 flex/grid布局 */
     // 其他样式...
   }

这样一来，当子元素的内容高度超过其父元素时，用户就可以通过滚动条来查看全部内容了。