CSS问题：hover时div被推出窗口，求实现谷歌艺术文化同款布局

问题根源 #

当前代码中，hover时给首尾元素添加margin-left/margin-right，同时增大flex-basis，导致所有元素总宽度超过容器的100vw，触发横向溢出。目标布局的核心是hover时当前元素扩展，其余元素等比例收缩，始终保持整体宽度与容器一致。

修复后的代码 #

CSS部分

html,
body {
  height: 100%;
  margin: 0;
  overflow: hidden; /* 确保页面整体无溢出 */
}

.grow {
  display: flex;
  height: 100vh;
  width: 100vw; /* 固定容器宽度为视口宽度 */
}

.grow > div {
  flex-basis: calc(100% / 6); /* 初始时6个元素平分宽度 */
  flex-shrink: 1; /* 允许非hover元素收缩 */
  flex-grow: 0;
  transition: flex-basis 0.5s ease;
  border: 1px solid yellow;
  box-sizing: border-box; /* 边框计入元素宽度，避免额外撑开 */
}

.grow > div:hover {
  flex-basis: 40%; /* hover元素扩展到40%宽度 */
}

/* 当有元素hover时，其余元素自动收缩以填满剩余空间 */
.grow:hover > div:not(:hover) {
  flex-basis: calc((100% - 40%) / 5);
}

.box1{background-color:#2A75A9} /* 修正颜色值语法错误 */
.box2{background-color:#2A75A9}
.box3{background-color:#2A75A9}
.box4{background-color:#2A75A9}
.box5{background-color:#2A75A9}
.box6{background-color:#2A75A9}

HTML部分（保持原结构即可）

<div class="grow">
      <div class='box1'>
        <div class="ninetyDegreeText">Box1</div>
        <div class="centeredText">Box1Html</div>
      </div>
      <div class='box2'>
        <div class="ninetyDegreeText" >Box2</div>
        <div class="centeredText">Box2</div>
      </div>
      <div class='box3'>
        <div class="ninetyDegreeText">Box3</div>
        <div class="centeredText">Box3Html</div>
      </div>
    <div class='box4'>
        <div class="ninetyDegreeText">Box4</div>
        <div class="centeredText">Box4Html</div>
      </div>
          <div class='box5'>
        <div class="ninetyDegreeText">Box5</div>
        <div class="centeredText">Box5Html</div>
      </div>
          <div class='box6'>
        <div class="ninetyDegreeText">Box6</div>
        <div class="centeredText">Box6Html</div>
      </div>
    </div>

关键调整说明 #

1. 移除首尾元素的margin规则：这是导致溢出的核心原因，改用动态计算非hover元素宽度来维持布局稳定。
2. 添加box-sizing: border-box：确保边框不会额外增加元素宽度，避免布局计算误差。
3. 动态分配宽度：
   • 初始状态：6个元素平分100%视口宽度
   • hover状态：当前元素占40%，剩余5个元素平分剩下的60%宽度，总宽度始终为100%，无溢出
4. 页面全局隐藏溢出：给html,body添加overflow:hidden，彻底消除横向滚动条

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