居中垂直滚动条覆盖内容的右边缘 div

Question

我想创建一个居中的弹出窗口，其中包含标题和下面的一张或多张卡片。每张卡片包含一个小 table。当卡片多于可以显示的数量时，会出现一个垂直滚动条。 但是有问题：垂直滚动条覆盖了卡片的右边缘。

行为取决于浏览器：

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 test page 显示：

打开jsfiddle页面，
按F5刷新（出现问题），然后
调整结果区域的大小（问题消失）。

更新

最后还是沿用了@Rayees-AC的原意：我把overflow-y: auto改成了overflow-y: scroll。他的其他想法（完全隐藏滚动条或删除 white-space: nowrap）不能用于我的情况。我很感谢他和@Giant-Realistic-Flying-Tiger 解决这个问题！

Answer 1

#1 - 不显示滚动条scroll enabled

我更改了以下代码。

div#content {
  -ms-overflow-style: none;  /* Internet Explorer 10+ */
  scrollbar-width: none;
}
div#content::-webkit-scrollbar { 
  display: none; /* Safari and Chrome */
}

我添加了另一个名为 class wrapper

的 div

.wrapper{
      width: 100%;
      height: 100%;
      overflow: hidden;
}

试试这个片段

* {
  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;
}
.wrapper{
    width: 100%;
    height: 100%;
    overflow: hidden;
}
div#content {
  max-height: 300px;
  overflow-y: auto;
  background: lightblue;
  -ms-overflow-style: none;  /* Internet Explorer 10+ */
  scrollbar-width: none;
}
div#content::-webkit-scrollbar { 
  display: none;
}

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;
}

<div id="container">
  <div id="frame">
    <h1>Frame Title</h1>
    <div class="wrapper">
    <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>
</div>

#2 - 自动缩小内容不滚动

* {
  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;
}
.wrapper{
    width: 100%;
    height: 100%;
    overflow: hidden;
}
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;
}

<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>
  </div>
</div>

#3 - 大内容需要滚动

* {
  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;
}

<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>

Answer 2

仅对 Firefox 使用 padding-right 和 overflow:hidden。这非常有效。

我也看不出 Chrome 有任何问题。

* {
  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;
}

/* check firefox browser */
@-moz-document url-prefix() {
  div#content{
    overflow-x: hidden;
  }
  
  div.card {
    padding-right:25px; /* 10px card padding + 15px firefox scrollbar width  */
  }
}

<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>

居中垂直滚动条覆盖内容的右边缘 div

Right edge of content covered by vertical scrollbar in centered div

html

css

layout

scrollbar

centering