解决滚动条拖动至右侧出现空白问题

原因分析

浏览器是默认100%宽度为浏览器窗口的宽度的，而页面中元素则有可能是指定的固定宽度，当窗口缩小至出现横向滚动条时，元素设置的100%宽度是当前窗口的宽度，出现固定宽度大于100%宽度的现象，这时右侧的背景就失效了，出现空白问题

举例说明

.ant-layout-header {
  width: 100%;
  height: 100%;
}
.ant-layout-header .header-container {
  width: 100%;
  max-width: 1200px;
  min-width: 420px;
  margin: 0 auto;
  padding: 0 30px;
  backgroung-color: 'blue';
}

此时，当窗口缩小至420px以下时，子元素的100%宽度实际是当前窗口的宽度，是小于420px的，所以最右侧的背景颜色会显示为白色，

解决方案

处理方法很简单，只需要父元素也设置最小宽度即可

.ant-layout-header {
  width: 100%;
  min-width: 420px;
  height: 100%;
}
.ant-layout-header .header-container {
  width: 100%;
  max-width: 1200px;
  min-width: 420px;
  margin: 0 auto;
  padding: 0 30px;
  backgroung-color: 'blue';
}

怕什么真理无穷，进一寸有进一寸的惊喜~