CSS子元素scale不影响父元素：解决hover时滚动条跳动问题

你遇到的问题根源是：按钮hover放大后超出容器范围，触发share-container的横向滚动条，而滚动条会占用垂直方向空间，导致容器高度变化，进而引发页面元素跳动。在保留overflow-x: auto的前提下，有以下几种可行方案：

方案1：用CSS属性提前预留滚动条空间 #

通过scrollbar-gutter: stable让容器提前预留滚动条的高度空间，即使滚动条未显示，也会保留相应位置，避免滚动条出现时的布局偏移。

修改.share-container的CSS：

.share-container {
  display: flex;
  flex-direction: row;
  white-space: nowrap;
  overflow-y: hidden;
  overflow-x: auto;
  scrollbar-gutter: stable; /* 添加这行 */
}

这个属性兼容性较好，现代浏览器都支持，是最简洁的解决方案。

方案2：调整按钮放大原点+预留容器右侧空间 #

让按钮从左侧中心放大，同时给容器右侧预留放大所需的空间，避免最后一个按钮hover时超出容器触发滚动条。

修改CSS：

.share-container {
  display: flex;
  flex-direction: row;
  white-space: nowrap;
  overflow-y: hidden;
  overflow-x: auto;
  padding-right: calc(40px * 0.7); /* 40px是按钮宽度，0.7是scale超出比例(1.7-1) */
}

button:hover {
  transform: scale(1.7);
  transform-origin: left center; /* 从左侧中心放大 */
}

这样最后一个按钮hover时会向左中心方向放大，不会向右超出容器，自然不会触发横向滚动条。

方案3：兼容旧浏览器的占位技巧 #

如果需要兼容不支持scrollbar-gutter的旧浏览器，可以通过伪元素强制容器高度包含滚动条空间：

.share-container {
  display: flex;
  flex-direction: row;
  white-space: nowrap;
  overflow-y: hidden;
  overflow-x: auto;
}

/* 用伪元素占位，让容器高度始终包含滚动条 */
.share-container::after {
  content: '';
  height: 100%;
  width: 0;
  overflow-y: scroll;
  visibility: hidden;
}

伪元素的滚动条会让浏览器自动计算滚动条高度，确保容器高度不会因为滚动条出现而变化。

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