我想创建一个居中的弹出窗口，其中包含一个标题和一张或多张卡片。每张卡片包含一个小桌子。当卡片多于无法显示时，会出现一个垂直滚动条。但是有一个问题：垂直滚动条覆盖了卡片的右边缘。
行为取决于浏览器：
- Chrome：刷新页面时出现问题，但调整页面大小时问题消失。
- Firefox：问题更严重，因为它不会在页面调整大小时消失。还有一个水平滚动条。
重现问题的 HTML+CSS 代码：
* {
margin: 0;
padding: 0;
font-family: Verdana, sans-serif;
}
html,
body {
height: 100%;
min-height: 500px;
}
div#container {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
width: 100%;
height: 100%;
min-height: 500px;
background: coral;
}
div#frame {
padding: 15px;
background: lightgreen;
}
h1 {
margin-bottom: 10px;
font-size: 20px;
}
div#content {
max-height: 300px;
overflow-y: auto;
background: lightblue;
}
div.card {
display: table;
padding: 10px;
background: lightyellow;
font-size: 15px;
}
div.card:not(.last-card) {
margin-bottom: 5px;
}
table {
border-collapse: collapse;
}
td {
padding: 5px;
background: lightpink;
white-space: nowrap;
}<div id="container">
<div id="frame">
<h1>Frame Title</h1>
<div id="content">
<div class="card">
<table>
<tbody>
<tr>
<td>Name</td>
<td>John Doe</td>
</tr>
<tr>
<td>Age</td>
<td>32</td>
</tr>
<tr>
<td>Notes</td>
<td>Lorem ipsum dolor sit amet</td>
</tr>
</tbody>
</table>
</div>
<div class="card">
<table>
<tbody>
<tr>
<td>Name</td>
<td>John Doe</td>
</tr>
<tr>
<td>Age</td>
<td>32</td>
</tr>
<tr>
<td>Notes</td>
<td>Lorem ipsum dolor sit amet</td>
</tr>
</tbody>
</table>
</div>
<!---->
<div class="card">
<table>
<tbody>
<tr>
<td>Name</td>
<td>John Doe</td>
</tr>
<tr>
<td>Age</td>
<td>32</td>
</tr>
<tr>
<td>Notes</td>
<td>Lorem ipsum dolor sit amet</td>
</tr>
</tbody>
</table>
</div>
<div class="card">
<table>
<tbody>
<tr>
<td>Name</td>
<td>John Doe</td>
</tr>
<tr>
<td>Age</td>
<td>32</td>
</tr>
<tr>
<td>Notes</td>
<td>Lorem ipsum dolor sit amet</td>
</tr>
</tbody>
</table>
</div>
<div class="card last-card">
<table>
<tbody>
<tr>
<td>Name</td>
<td>John Doe</td>
</tr>
<tr>
<td>Age</td>
<td>32</td>
</tr>
<tr>
<td>Notes</td>
<td>Lorem ipsum dolor sit amet</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>上面的代码片段查看器在 Chrome 中没有显示问题，所以这里有一个jsfiddle 测试页面：
- 打开jsfiddle页面，
- 按F5刷新（出现问题），然后
- 调整结果区域的大小（问题消失）。
更新
最后我还是用了@Rayees-AC 原来的想法：我改成overflow-y: auto了overflow-y: scroll. 他的其他想法（完全隐藏滚动条或删除white-space: nowrap）在我的情况下无法使用。我很感谢他和@Giant-Realistic-Flying-Tiger 解决这个问题！