固定右侧HTML内容后，如何让浏览器横向缩放时左侧重绘右侧稳定？

可以通过以下几种CSS布局方案实现需求，让右侧内容保持固定，仅左侧随窗口宽度调整：

• CSS Grid 布局方案
  利用Grid的列定义，给右侧设置固定宽度，左侧使用1fr占据剩余空间，窗口缩放时只有左侧会自适应调整：

  .container {
    display: grid;
    grid-template-columns: 1fr 300px; /* 左侧自适应，右侧固定300px，可按需修改宽度 */
  }
  .left-content { grid-column: 1; }
  .right-content { grid-column: 2; }
  

• Flex 布局方案
  通过Flex的弹性属性，让左侧填充剩余空间，同时固定右侧宽度并禁止其收缩：

  .container {
    display: flex;
  }
  .left-content {
    flex: 1; /* 左侧占满容器剩余宽度 */
  }
  .right-content {
    width: 300px; /* 固定右侧宽度 */
    flex-shrink: 0; /* 防止窗口缩小时右侧被压缩 */
  }
  

• 优化重绘闪烁的小技巧
  给左侧内容添加will-change属性，提示浏览器提前优化左侧的重绘流程，减少闪烁：

  .left-content {
    will-change: width;
  }
  

内容的提问来源于stack exchange，提问作者rendom