Kevin Powell - CommunityKP-C
Kevin Powell - Community•2y ago•
14 replies
Dennis

Parent container with child elements position: absolute does not size properly to fit the children

Really hard to put my thoughts into words but I have a container essentially and I have two h3's inside of it which I want to paginate. I have it working as I want but only when I explicitly tell the container its height and width. I understand its behavior because position absolute pulls it out of the flow but that means without explicit width and height my container is a tiny blob. This impacts my reactiveness of the website as when the width of the device increases or decreases text starts to overflow instead of the container adapting to fit the content

If I remove position absolute and try to explicitly set the width of the child it doesn't work (I try set 1200px)

css:
.paginatedContainer {
    /* border: 1px solid blue; */
    border: 1px solid rgba(158, 158, 158, 0.3);
    height: 76px;
    width: min(calc(75vw + 20px), 1270px);
    overflow: hidden;
    position: relative;
    backdrop-filter: blur(18px) saturate(180%);
    box-shadow: 2px 2px 4px rgba(56, 56, 56, 0.6), -2px -2px 4px rgba(56, 56, 56, 0.6);
    border-radius: 10px;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.first, .second {
    text-align: center;
    /* width: 600px; */
    position: absolute;
    padding: 0 1rem;
}


html react component (You can provide Vanilla JS solution I can convert)
<>
    <div className="paginatedContainer animatable disable-select">
        <h3 className="first text-xl text-primary font-giest-regular">
            {"Some long text"}
            <span className="animatedUnderline">Tacoma</span>
            {"Some more long text"}
        </h3>
        <h3 className="second text-xl text-primary font-giest-regular">
            {"More long text"}
            <span className="animatedUnderline">Seattle</span>
            {" and "}
            <span className="animatedUnderline">Tacoma</span>
            {"More long text"}
        </h3>
    </div>
</>


Let me know if you need any more information
Was this page helpful?