CSS高度自适应失效、侧边栏sticky粘性定位问题求助

两个问题同时出现的核心是结构和CSS写法不符合两栏自适应、sticky定位的生效规则：

• 当前<main>和<aside>是body下的平级兄弟块级元素，默认上下堆叠排列，没有形成同一父级下的两栏结构，高度绑定、sticky范围控制都无从谈起。
• height: auto是块级元素在正常文档流中的默认值，出现不生效基本都是因为给父/子元素加了固定高度、浮动/绝对定位脱标但未触发BFC导致高度塌陷，不需要额外声明该属性，把元素放回正常文档流即可自动适配内容高度。
• position: sticky生效有三个强制要求：
  1. 必须明确指定top/bottom/left/right其中至少一个滚动阈值
  2. 元素的所有祖先元素不能设置overflow: hidden/auto/scroll（滚动容器本身除外）
  3. 元素的粘性固定范围不会超过其直接父元素的高度边界，当前结构下aside的父级是body，高度等于自身内容高度，滚动过自身内容高度后自然会跟随页面滚动，无法和主内容高度绑定。

首先调整HTML结构，把主内容和侧边栏放到同一个flex父容器内：

<body>
  <!-- 两栏布局公共父容器 -->
  <div class="layout-wrap">
    <main>
      <div class="container">
        <div class="main-content">
          <section>
            <h1>Lorem, ipsum dolor.</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam, quia illo! Quasi quis esse facere. Modi tenetur nesciunt pariatur distinctio perspiciatis, consequuntur, porro dignissimos, sit quae quas veritatis quos maxime?</p>
            <img src="" alt="主内容配图">
            <!-- 可填充足够长的测试内容验证滚动效果 -->
          </section>
        </div>
      </div>
    </main>

    <aside>
      <div class="aside-content">
        <section>
          <h1>Lorem, ipsum dolor.</h1>
          <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sed saepe voluptates id nam fugit rem illo dolorum expedita aliquam, odio harum impedit ratione quasi, distinctio mollitia, eum totam odit! Eos!</p>
          <img src="" alt="侧边栏配图">
        </section>
      </div>
    </aside>
  </div>
</body>

对应CSS实现：

/* 重置浏览器默认边距、盒模型干扰 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.layout-wrap {
  display: flex;
  gap: 24px; /* 两栏间距，按需调整 */
  max-width: 1200px; /* 页面最大内容宽度，按需调整 */
  margin: 0 auto;
  padding: 20px;
  /* 核心：禁止flex默认拉伸子元素高度，否则sticky直接失效 */
  align-items: flex-start;
}

main {
  /* 主内容占70%宽度，不随内容伸缩 */
  flex: 0 0 70%;
}

aside {
  /* 侧边栏占剩余宽度 */
  flex: 0 0 calc(30% - 24px);
  /* 粘性定位核心配置 */
  position: sticky;
  top: 20px; /* 滚动到距视口顶部20px时固定，按需调整 */
}

/* 通用内容样式，按需修改 */
.main-content, .aside-content {
  line-height: 1.6;
}
img {
  max-width: 100%;
  display: block;
  margin: 12px 0;
}

• 不要给html/body/.layout-wrap任意一层加overflow: hidden属性，会直接打断sticky的生效逻辑。
• 不需要额外给任何元素加height: auto，正常文档流下的块级元素天然会自适应内部内容高度，之前的高度异常是结构错乱、元素脱标导致的。
• 如果需要兼容极老旧的webkit内核浏览器，可额外加position: -webkit-sticky做前缀适配，现代浏览器无需额外配置。
• 如果侧边栏高度超过视口高度，建议把top值设为负值，保证侧边栏内容滚动到底后再跟随页面移动，避免内容被截断。

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