如何实现滚动时粘性Div的收缩动态布局（无需JavaScript）

我在一个简单的HTML/CSS结构中遇到了问题：#main_container内的container1和container2垂直排列，内容高度超出窗口。想要实现以下效果：

• container1初始宽度100%
• 滚动#main_container时，它被container2"推挤"但保持在容器顶部，高度和宽度逐渐收缩至最小宽度30%（收缩而非消失，为container2内容腾出空间）
• 能否不使用JavaScript实现该效果？

另外计划用图片替换#subcontainer（该元素需保持在页面顶部），但不确定哪个Div设为粘性、哪个元素定义最小宽度。

我的尝试代码：

HTML #

<body>
  <div id="main_container">
  <!-- content that should shrink and stay at the top -->
  <div id="container1"><div id="subcontainer" alt="should be an image"></div></div>

  <!-- overflowing content -->
  <div id="container2">
    <p>AAAAAAAAAAAAAAAAAAA</p>
    <p>AAAAAAAAAAAAAAAAAAA</p>
    <p>AAAAAAAAAAAAAAAAAAA</p>
    <p>AAAAAAAAAAAAAAAAAAA</p>
    <p>AAAAAAAAAAAAAAAAAAA</p>
    <p>AAAAAAAAAAAAAAAAAAA</p>
    <p>AAAAAAAAAAAAAAAAAAA</p>
    <p>AAAAAAAAAAAAAAAAAAA</p>
    <p>AAAAAAAAAAAAAAAAAAA</p>
    <p>AAAAAAAAAAAAAAAAAAA</p>
    <p>AAAAAAAAAAAAAAAAAAA</p>
    <p>AAAAAAAAAAAAAAAAAAA</p>
    <p>AAAAAAAAAAAAAAAAAAA</p>
    <p>AAAAAAAAAAAAAAAAAAA</p>
    <p>AAAAAAAAAAAAAAAAAAA</p>
    <p>AAAAAAAAAAAAAAAAAAA</p>
    <p>AAAAAAAAAAAAAAAAAAA</p>
    <p>AAAAAAAAAAAAAAAAAAA</p>
    <p>AAAAAAAAAAAAAAAAAAA</p>
    <p>AAAAAAAAAAAAAAAAAAA</p>
    <p>AAAAAAAAAAAAAAAAAAA</p>
    <p>AAAAAAAAAAAAAAAAAAA</p>
    <p>AAAAAAAAAAAAAAAAAAA</p>
    <p>AAAAAAAAAAAAAAAAAAA</p>
    <p>AAAAAAAAAAAAAAAAAAA</p>
    <p>AAAAAAAAAAAAAAAAAAA</p>
    <p>AAAAAAAAAAAAAAAAAAA</p>
    <p>AAAAAAAAAAAAAAAAAAA</p>
    <p>AAAAAAAAAAAAAAAAAAA</p>
    <p>AAAAAAAAAAAAAAAAAAA</p>
    <p>AAAAAAAAAAAAAAAAAAA</p>
    <p>AAAAAAAAAAAAAAAAAAA</p>
    <p>AAAAAAAAAAAAAAAAAAA</p>
    <p>AAAAAAAAAAAAAAAAAAA</p>
    <p>AAAAAAAAAAAAAAAAAAA</p>
    <p>AAAAAAAAAAAAAAAAAAA</p>
    <p>AAAAAAAAAAAAAAAAAAA</p>
    <p>AAAAAAAAAAAAAAAAAAA</p>
    <p>AAAAAAAAAAAAAAAAAAA</p>
    <p>AAAAAAAAAAAAAAAAAAA</p>
    <p>AAAAAAAAAAAAAAAAAAA</p>
    <p>AAAAAAAAAAAAAAAAAAA</p>
    <p>AAAAAAAAAAAAAAAAAAA</p>
    <p>AAAAAAAAAAAAAAAAAAA</p>
    <p>AAAAAAAAAAAAAAAAAAA</p>
    <p>AAAAAAAAAAAAAAAAAAA</p>
    <p>AAAAAAAAAAAAAAAAAAA</p>
    <p>AAAAAAAAAAAAAAAAAAA</p>
    <p>AAAAAAAAAAAAAAAAAAA</p>
    <p>AAAAAAAAAAAAAAAAAAA</p>
  </div>
  </div>
</body>

CSS #

#main_container {
    width: 100vw;
    height: 100vh;
    padding: 15px;
    position: relative; 
    box-sizing: border-box;
    background-color: grey;
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
}

#container1 {
    position: sticky;
    top:  0;
    padding:  5px;
    height:  100%; 
    width:  50%;
    min-width: 30%;
    background-color: rgb(149,  149,  255);
    box-sizing: border-box;
    flex:  1;
}


#subcontainer {
    display: flex;
    height: 600px;
    width: 100%;
    background-color: blueviolet;
    box-sizing: border-box;
}

#container2 {
    height: auto;
    background-color: rgb(255, 0, 0);
    font-size: 15px; 
    box-sizing: border-box;
    position: relative; 
    opacity: 0.5;
}

完全可以不依赖JavaScript实现，核心利用CSS Grid布局+position: sticky属性来完成滚动挤压效果，以下是具体思路和修正代码：

核心思路 #

1. 布局重构：将#main_container从flex垂直布局改为grid布局，通过网格列的动态分配实现滚动时的空间挤压逻辑
2. 粘性定位：给container1设置position: sticky+top: 0，确保它始终固定在容器顶部；同时设置min-width: 30%限制最小宽度
3. 空间分配：让container2默认占据整行空间，滚动时grid布局会自动挤压container1的宽度，直到触达最小宽度限制
4. 图片适配：直接将#subcontainer替换为<img>标签，继承container1的宽度变化，用object-fit保证图片比例

修正后的代码 #

HTML #

<body>
  <div id="main_container">
    <!-- 收缩并固定在顶部的内容 -->
    <div id="container1">
      <img id="subcontainer" src="你的图片地址" alt="顶部固定图片">
    </div>

    <!-- 超长内容 -->
    <div id="container2">
      <p>AAAAAAAAAAAAAAAAAAA</p>
      <p>AAAAAAAAAAAAAAAAAAA</p>
      <p>AAAAAAAAAAAAAAAAAAA</p>
      <p>AAAAAAAAAAAAAAAAAAA</p>
      <p>AAAAAAAAAAAAAAAAAAA</p>
      <p>AAAAAAAAAAAAAAAAAAA</p>
      <p>AAAAAAAAAAAAAAAAAAA</p>
      <p>AAAAAAAAAAAAAAAAAAA</p>
      <p>AAAAAAAAAAAAAAAAAAA</p>
      <p>AAAAAAAAAAAAAAAAAAA</p>
      <p>AAAAAAAAAAAAAAAAAAA</p>
      <p>AAAAAAAAAAAAAAAAAAA</p>
      <p>AAAAAAAAAAAAAAAAAAA</p>
      <p>AAAAAAAAAAAAAAAAAAA</p>
      <p>AAAAAAAAAAAAAAAAAAA</p>
      <p>AAAAAAAAAAAAAAAAAAA</p>
      <p>AAAAAAAAAAAAAAAAAAA</p>
      <p>AAAAAAAAAAAAAAAAAAA</p>
      <p>AAAAAAAAAAAAAAAAAAA</p>
      <p>AAAAAAAAAAAAAAAAAAA</p>
      <p>AAAAAAAAAAAAAAAAAAA</p>
      <p>AAAAAAAAAAAAAAAAAAA</p>
      <p>AAAAAAAAAAAAAAAAAAA</p>
      <p>AAAAAAAAAAAAAAAAAAA</p>
      <p>AAAAAAAAAAAAAAAAAAA</p>
      <p>AAAAAAAAAAAAAAAAAAA</p>
      <p>AAAAAAAAAAAAAAAAAAA</p>
      <p>AAAAAAAAAAAAAAAAAAA</p>
      <p>AAAAAAAAAAAAAAAAAAA</p>
      <p>AAAAAAAAAAAAAAAAAAA</p>
      <p>AAAAAAAAAAAAAAAAAAA</p>
      <p>AAAAAAAAAAAAAAAAAAA</p>
      <p>AAAAAAAAAAAAAAAAAAA</p>
      <p>AAAAAAAAAAAAAAAAAAA</p>
      <p>AAAAAAAAAAAAAAAAAAA</p>
      <p>AAAAAAAAAAAAAAAAAAA</p>
      <p>AAAAAAAAAAAAAAAAAAA</p>
      <p>AAAAAAAAAAAAAAAAAAA</p>
      <p>AAAAAAAAAAAAAAAAAAA</p>
      <p>AAAAAAAAAAAAAAAAAAA</p>
      <p>AAAAAAAAAAAAAAAAAAA</p>
      <p>AAAAAAAAAAAAAAAAAAA</p>
      <p>AAAAAAAAAAAAAAAAAAA</p>
      <p>AAAAAAAAAAAAAAAAAAA</p>
      <p>AAAAAAAAAAAAAAAAAAA</p>
      <p>AAAAAAAAAAAAAAAAAAA</p>
      <p>AAAAAAAAAAAAAAAAAAA</p>
      <p>AAAAAAAAAAAAAAAAAAA</p>
      <p>AAAAAAAAAAAAAAAAAAA</p>
      <p>AAAAAAAAAAAAAAAAAAA</p>
    </div>
  </div>
</body>

CSS #

#main_container {
  width: 100vw;
  height: 100vh;
  padding: 15px;
  box-sizing: border-box;
  background-color: grey;
  display: grid;
  overflow-y: scroll;
}

#container1 {
  position: sticky;
  top: 0;
  padding: 5px;
  width: 100%;
  min-width: 30%;
  height: auto;
  background-color: rgb(149, 149, 255);
  box-sizing: border-box;
}

#subcontainer {
  width: 100%;
  height: auto;
  object-fit: cover; /* 保持图片比例，避免拉伸变形 */
}

#container2 {
  background-color: rgb(255, 0, 0);
  font-size: 15px;
  box-sizing: border-box;
  opacity: 0.5;
  grid-column: 1 / -1; /* 强制占据整行空间 */
}

细节说明 #

• 初始状态下container1占满100%宽度，滚动时grid布局会自动调整其宽度，直到触达min-width:30%的限制
• container1设置为粘性元素，始终固定在容器顶部，不会被滚动内容覆盖
• 替换图片后，object-fit: cover可以保证图片在宽度变化时保持原有比例，避免拉伸变形

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