<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>最终修复滚动条 Demo</title>
<style>
html {
font-size: 16px;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
padding: 20px;
box-sizing: border-box;
background-color: #f0f2f5;
}
.display-box {
/* --- 核心改动 1：使用 Flexbox 布局 --- */
display: inline-flex;
flex-direction: column;
position: relative;
min-width: 200px;
max-width: 560px;
min-height: 200px;
max-height: 300px;
background-color: #ffffff;
border-radius: 8px; /* 圆角半径 */
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.display-box::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
background: red;
-webkit-mask: linear-gradient(to right, white, transparent) top 0 left
6px / calc(33.33% - 6px) 1px no-repeat,
linear-gradient(to bottom, white, transparent) top 6px left 0 / 1px
calc(33.33% - 6px) no-repeat,
linear-gradient(to left, white, transparent) bottom 0 right 6px /
calc(33.33% - 6px) 1px no-repeat,
linear-gradient(to top, white, transparent) bottom 6px right 0 / 1px
calc(33.33% - 6px) no-repeat,
radial-gradient(
circle at bottom right,
transparent 7px,
white 7px,
white 8px,
transparent 8px
)
top left / 8px 8px no-repeat,
radial-gradient(
circle at top left,
transparent 7px,
white 7px,
white 8px,
transparent 8px
)
bottom right / 8px 8px no-repeat;
mask: linear-gradient(to right, white, transparent) top 0 left 6px /
calc(33.33% - 6px) 1px no-repeat,
linear-gradient(to bottom, white, transparent) top 6px left 0 / 1px
calc(33.33% - 6px) no-repeat,
linear-gradient(to left, white, transparent) bottom 0 right 6px /
calc(33.33% - 6px) 1px no-repeat,
linear-gradient(to top, white, transparent) bottom 6px right 0 / 1px
calc(33.33% - 6px) no-repeat,
radial-gradient(
circle at bottom right,
transparent 7px,
white 7px,
white 8px,
transparent 8px
)
top left / 8px 8px no-repeat,
radial-gradient(
circle at top left,
transparent 7px,
white 7px,
white 8px,
transparent 8px
)
bottom right / 8px 8px no-repeat;
}
.display-box-content {
padding: 1.25rem;
padding-right: 2.5rem;
box-sizing: border-box;
overflow-y: auto;
/* --- 核心改动 2：移除 height: 100% --- */
scrollbar-width: thin;
scrollbar-color: #c1c1c1 #f1f1f1;
}
.title {
font-size: 0.875rem;
color: #303133;
line-height: 1.5;
white-space: nowrap;
}
.title .label {
font-weight: bold;
color: red;
font-size: 1rem;
margin-right: 0.5em;
}
.details {
margin-top: 0.5rem;
}
.suggestion {
margin-top: 1rem;
}
.details h3,
.suggestion h3 {
font-size: 1rem;
color: #303133;
margin-top: 0;
margin-bottom: 0.25rem;
font-weight: 600;
}
.details-content,
.suggestion-content {
font-size: 0.875rem;
color: #606266;
line-height: 1.7;
}
.details-content {
min-height: 50px;
}
</style>
</head>
<body>
<div class="display-box">
<div class="display-box-content">
<div class="title">
<span class="label">标题:</span
><span>关于系统功能更新的详细说明</span>
</div>
<div class="details">
<h3>详情</h3>
<div class="details-content">
<p>
此版本已修复滚动条问题。当内容足够多时，滚动条现在会正确出现。
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non
risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing
nec, ultricies sed, dolor.
</p>
<p>
Cras elementum ultrices diam. Maecenas ligula massa, varius a,
semper congue, euismod non, mi. Proin porttitor, orci nec nonummy
molestie, enim est eleifend mi, non fermentum diam nisl sit amet
erat.
</p>
<p>
Duis semper. Duis arcu massa, scelerisque vitae, consequat in,
pretium a, enim. Pellentesque congue. Ut in risus volutpat libero
pharetra tempor.
</p>
<p>
Cras vestibulum bibendum augue. Praesent egestas leo in pede.
Praesent blandit odio eu enim. Pellentesque sed dui ut augue
blandit sodales.
</p>
<p>
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede
pellentesque fermentum. Maecenas adipiscing ante non diam.
</p>
<p>
Fusce interdum. Maecenas eu lacus. In a nulla. Curabitur ornare.
Nulla nisi. Vivamus consectetuer, dolor vitae tempor varius, enim
est elementum sapien, in porttitor diam nulla vitae dui.
</p>
<p>
Cras elementum ultrices diam. Maecenas ligula massa, varius a,
semper congue, euismod non, mi. Proin porttitor, orci nec nonummy
molestie, enim est eleifend mi, non fermentum diam nisl sit amet
erat.
</p>
<p>
Duis semper. Duis arcu massa, scelerisque vitae, consequat in,
pretium a, enim. Pellentesque congue. Ut in risus volutpat libero
pharetra tempor.
</p>
</div>
</div>
<div class="suggestion">
<h3>建议</h3>
<div class="suggestion-content">
<p>使用Flexbox布局是解决此类高度和溢出问题的现代标准方法。</p>
</div>
</div>
</div>
</div>
</body>
</html>