滚动条挤占内容宽度、破坏布局的解决方案

#问题
当内容增多，滚动条从无到有时，它的出现挤压了内容宽度，导致原来设计好的布局被破坏。
#原因
滚动条的宽度是计算到内容 content 里的。
#解决思路
增加一个中间层，使得外部容器宽度保持设计宽度，内部元素排列保持不变。
#具体案例/方案

使用 antd 的 Modal 弹窗，基于其最简单的基本示例，如图：

希望的效果：

• 弹窗定宽定高；
• 一排4个，宽度、边距固定；
• 当总共8艘航母，正好两排，整整齐齐停在泊位，带滚动条。

**实际的效果： **

• 当滚动条不出现，一切正常；
• 当滚动条出现， 004 号马上被挤了下去。

代码
基于 Modal 弹窗 最简单的基本示例
index.js

... ...
<Modal
          title="航空母舰"
          visible={this.state.visible}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
        >
          <div className="card">001 辽宁号</div>
          <div className="card">002 山东号</div>
          <div className="card">003 弹射型</div>
          <div className="card">004 平甲板</div>
          <div className="card">005 核动力</div>
          <div className="card">006 电磁炮</div>
          <div className="card">007 隐形化</div>
          <div className="card">008 歼星舰</div>
        </Modal>
... ...

index.css

... ...

.ant-modal-content{
  width: 500px;
}
.ant-modal-body {
  display: flex;
  flex-wrap: wrap;
  padding: 10px;
  height: 190px;
  overflow-x: hidden;
  overflow-y: scroll;
}

... ...

不好的解决方案

查了下解决方案，有人提到加大容器宽度，然后在外层设置 overflow: hidden 隐藏掉超出的部分，隐藏滚动条。

试着做了下，效果如图：

代码

.ant-modal-content{
  width: 500px;
  overflow: hidden; /* 隐藏超出部分 */
}
.ant-modal-body {
  display: flex;
  flex-wrap: wrap;
  padding: 10px;
  height: 170px;
  overflow-x: hidden;
  overflow-y: scroll;
  width: 517px; /* 预留出滚动条的宽度，一般是17px */
}

不好的原因

如此一来，一排是整整齐齐停下了4 个。
但没了滚动条，用户很容易误认为只有这四个。
为了好看损失了必要的功能，这是不可取的。

更好的解决方案

想到“没有什么问题不是加一层中间层解决不了的”，于是加了一层 container div，如图

代码
index.js

··· ···
<Modal
          title="航空母舰"
          visible={this.state.visible}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
        >
          <div className='container'>
             <div className="card">001 辽宁号</div>
             <div className="card">002 山东号</div>
             <div className="card">003 弹射型</div>
             <div className="card">004 平甲板</div>
             <div className="card">005 核动力</div>
             <div className="card">006 电磁炮</div>
             <div className="card">007 隐形化</div>
             <div className="card">008 歼星舰</div>
          </div>
        </Modal>
··· ···

index.css

... ...

.ant-modal-content{
  width: 500px;
}
.ant-modal-body {
  padding: 10px;
  height: 190px;
  overflow-x: hidden;
  overflow-y: auto;
}
.container {
  display: flex;
  flex-wrap: wrap;
  width: 517px;
}

... ...

原因

原因很简单，现在的内-中-外三层结构里，滚动条吃掉的是外层的内容宽度，中间层的定宽为内层 div 的排列提供了保障。

其他方案

可以使用这个伪类 ::-webkit-scrollbar ，不过只能作用于 Chrome 内核的浏览器。可以参考 MDN 文档。