flex元素后代无法使用absolute定位？如何让.top_box固定在.content头部？

你遇到的不是flex元素后代无法使用absolute定位的问题，核心原因是.content设置了overflow-y: auto，而.top_box作为它的绝对定位后代，属于.content的可滚动内容区域，因此会跟随容器一起滚动。以下是两种可行的解决方法：

方案一：调整DOM结构，将.top_box移至.content同级 #

把.top_box从.content内部移出，与.content处于同一层级，通过绝对定位让它固定在.content顶部，同时给.content设置padding-top避免内容被遮挡。

.wrapper {
    height: 160px;
    display: flex;
    flex-direction: column;
    position: relative; /* 新增，作为.top_box的定位父级 */
}
.title_container {
    background: pink;
}
.content {
    height: 0;
    flex: auto;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: bisque;
    padding-top: 16px; /* 为.top_box预留高度空间 */
}
.top_box {
    position: absolute;
    top: 28px; /* 数值等于.title_container的实际高度，可根据需求调整 */
    left: 0;
    width: 100%;
    height: 16px;
    background: royalblue;
}
.scroll_fill {
    height: 500px;
}

<div class="wrapper">
    <div class="title_container">anyString</div>
    <div class="top_box"></div> <!-- 移至.content同级 -->
    <div class="content">
        <div class="scroll_fill"></div>
    </div>
</div>

方案二：保留原DOM结构，新增内部滚动容器 #

在.content内部新增一个容器，将.scroll_fill放入其中，让这个新增容器负责滚动逻辑，.content本身不再设置overflow。这样.top_box作为.content的绝对定位元素，会固定在顶部不跟随滚动。

.wrapper {
    height: 160px;
    display: flex;
    flex-direction: column;
}
.title_container {
    background: pink;
}
.content {
    height: 0;
    flex: auto;
    position: relative;
    background-color: bisque;
    /* 移除原overflow属性 */
}
.content_scroll { /* 新增滚动容器 */
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding-top: 16px; /* 为.top_box预留高度空间 */
}
.top_box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 16px;
    background: royalblue;
}
.scroll_fill {
    height: 500px;
}

<div class="wrapper">
    <div class="title_container">anyString</div>
    <div class="content">
        <div class="top_box"></div>
        <div class="content_scroll"> <!-- 新增滚动容器 -->
            <div class="scroll_fill"></div>
        </div>
    </div>
</div>

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