absolute is not available for the grandchildren of flex elements?-CodePudding

How do I get the .top_box to be fixed in the head of the .content?

With the current code, the .top_box always scrolls along with the .content.

.wrapper {
    height: 160px;
    display: flex;
    flex-direction: column;
}
.title_container {
    background: pink;
}
.content {
    height: 0;
    flex: auto;
    position: relative;

    overflow-y: auto;
    overflow-x: hidden;
    background-color: bisque;
}
.top_box {
    position: absolute;
    top: 0;
    left: 0;
    width: 300px;
    height: 16px;
    background: royalblue;
}

.scroll_fill {
    height: 500px;
}

<div >
    <div >anyString</div>
    <div >
        <div ></div>
        <div ></div>
    </div>
</div>

CodePudding user response：

You can just change the order of the HTML-Elements in the code and write .top before .item. If you do that, you can also remove most of the CSS because it’s unnecessary.

Here‘s a full example:

.box1 {
    height: 600px;
    display: flex;
    flex-direction: column;
}
.box2 {
    background: pink;
}
.box3 {
    background-color: red;
}
.top {
    width: 300px;
    height: 5px;
    background: blue;
}
.item {
    height: 1000px;
}

<div >
    <div >anyString</div>
    <div >
        <div ></div>
        <div ></div>
    </div>
</div>

Also a few other things: I wouldnt recommend just using divs and naming them like box1, box2, box3, .... Instead, give them names wich describe their use and meaning like wrapper, top_container, bottom_container, top_item, content, ...: CSS Naming Conventions.

You can also use specific tags with semantic meanings: Sematic HTML5 Elements

Hope that helps

CodePudding user response：

.wrapper {
    height: 160px;
    display: flex;
    flex-direction: column;
}
.title_container {
    background: pink;
}
.content {
    height: 0;
    flex: auto;
    position: relative;
    overflow: hidden;
    background-color: bisque;
}

.contentInner {
    height: 100%;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}
.top_box {
    position: absolute;
    top: 0;
    left: 0;
    width: 300px;
    height: 16px;
    background: royalblue;
}

.scroll_fill {
    height: 500px;
}

<div >
    <div >anyString</div>
    <div >
        <div ></div>
        <div >
            <div ></div>
        </div>
    </div>
</div>