Position elements inside child of "display: flex"

I had a webpage that I split into sections, each section with it’s own content. Unfortunately i needed it to be responsive, so i gave the body element a display: flex style. sect-1 and sect-2 were children of the body, so they are stacking, as expected. The issue is the content inside the flex items was being positioned absolutely, however now it is no longer being positioned from the sect-1 and sect-2, and now the whole page. Why does absolute positioning ignore flex item parents, and what can i do to position the children of the flex objects?

The HTML :

<body>
    <div id="sect-1">
        <h2 id="quote">I AM A WEB DESIGNER_</h2>
    </div>
</body>

The container css :

 body {
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

The first flex object :

#sect-1 {
    background: none;
    width: 100vw;
    height: 100vh;
    left: 0vw;
    z-index: 98;
}

And the object I need positioning inside the flex object (not container) :

#quote {
    align-content: left;
    font-family: Courier New;
    color: black;
    font-size: 25px;
    letter-spacing: 5px;
    line-height: 0px;
    width: 500px;
    position: absolute;
    top: calc(50vh - 12.5px);
    left: calc(50vw - 190px);
}


For the quote to position itself inside the flex item sect-1, the sect-1 need to have a position other than static, normally relative is what one use.