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

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

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

希望的效果：

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

**实际的效果： **

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

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

... ...

          
001 辽宁号
          
002 山东号
          
003 弹射型
          
004 平甲板
          
005 核动力
          
006 电磁炮
          
007 隐形化
          
008 歼星舰
        
... ...

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

··· ···

          

             
001 辽宁号
             
002 山东号
             
003 弹射型
             
004 平甲板
             
005 核动力
             
006 电磁炮
             
007 隐形化
             
008 歼星舰
          
        
··· ···

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 文档。