css 怎么让内容区的滚动条 不能超出 父盒子

如果你想让内容区的滚动条不能超出父盒子，可以使用 CSS 的 `overflow` 属性来实现。具体来说，你可以将父盒子的 `overflow` 属性设置为 `hidden`，然后将内容区的 `overflow` 属性设置为 `auto`，这样当内容区的内容超出父盒子的范围时，会自动出现滚动条，但无论怎样滚动，都不会超出父盒子的范围。例如：

.parent {
  overflow: hidden;
}

.content {
  overflow: auto;
}

在上面的示例代码中，`.parent` 是父盒子的 CSS 类名，`.content` 是内容区的 CSS 类名。

相关问题

盒子内容超出隐藏，保留垂直方向的滚动条

可以使用 CSS 的 overflow 属性来实现这个效果。将父元素的 overflow 属性设置为 auto 或 scroll，再将子元素的高度设为超出父元素高度的值，就可以实现在父元素内部保留垂直方向的滚动条，同时隐藏超出父元素范围的内容。

例如：

<div class="parent">
  <div class="child">
    <!-- 子元素内容 -->
  </div>
</div>

.parent {
  height: 300px; /* 父元素高度 */
  overflow-y: auto; /* 垂直方向滚动条 */
}

.child {
  height: 500px; /* 超出父元素高度 */
}

这样，当子元素内容超出父元素高度时，父元素就会出现垂直方向的滚动条，以便用户查看所有内容。

父盒子下的标题行高度自适应，内容区flex设为1，内容区超出滚动

这是一个典型的flex布局嵌套，可以按照以下代码进行实现：

HTML部分：

<div class="wrapper">
  <div class="header">
    <h1>标题</h1>
  </div>
  <div class="content">
    <p>内容区</p>
  </div>
</div>

CSS部分：

.wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.header {
  height: auto;
}

.header h1 {
  margin: 0;
  padding: 20px;
  line-height: 1.2;
}

.content {
  flex: 1;
  overflow-y: scroll;
  padding: 20px;
}

其中，父盒子设置为flex布局，并且高度设置为100%；标题行高度设置为自适应，即设置为auto；标题行内的h1标签进行一些样式设置，包括margin、padding和line-height；内容区设置为flex: 1，即将剩余空间全部占满，同时设置overflow-y:scroll，当内容区超出时出现滚动条。