<!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 {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 left6px / calc(33.33% - 6px) 1px no-repeat,linear-gradient(to bottom, white, transparent) top 6px left 0 / 1pxcalc(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 / 1pxcalc(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 / 1pxcalc(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 / 1pxcalc(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;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 nonrisus. Suspendisse lectus tortor, dignissim sit amet, adipiscingnec, ultricies sed, dolor.</p><p>Cras elementum ultrices diam. Maecenas ligula massa, varius a,semper congue, euismod non, mi. Proin porttitor, orci nec nonummymolestie, enim est eleifend mi, non fermentum diam nisl sit ameterat.</p><p>Duis semper. Duis arcu massa, scelerisque vitae, consequat in,pretium a, enim. Pellentesque congue. Ut in risus volutpat liberopharetra tempor.</p><p>Cras vestibulum bibendum augue. Praesent egestas leo in pede.Praesent blandit odio eu enim. Pellentesque sed dui ut augueblandit sodales.</p><p>Vestibulum ante ipsum primis in faucibus orci luctus et ultricesposuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pedepellentesque 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, enimest 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 nonummymolestie, enim est eleifend mi, non fermentum diam nisl sit ameterat.</p><p>Duis semper. Duis arcu massa, scelerisque vitae, consequat in,pretium a, enim. Pellentesque congue. Ut in risus volutpat liberopharetra tempor.</p></div></div><div class="suggestion"><h3>建议</h3><div class="suggestion-content"><p>使用Flexbox布局是解决此类高度和溢出问题的现代标准方法。</p></div></div></div></div></body>
</html>
