Kevin Powell - Community•6mo ago

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;
}

.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>
</>

<>
    <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

13 Replies

MarkBoots•6mo ago

why make the .first and .second absolute?, you can just make them regular childs of the .paginatedContainer

DennisOP•6mo ago

Well as shown in the video when i do that they lock into some 612px width and I cannot change it no matter what. Setting width: 100%, width: 200%, width: 1000px, width: 1000000px nothing changes it unless its less than that magical 624px or whatever it is.

MarkBoots•6mo ago

i dont really understand tbh. what about this https://codepen.io/MarkBoots/pen/vYwPzap?editors=1100

DennisOP•6mo ago

Ends up looking like this when i update my css to this:

.paginatedContainer {
    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: grid;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
}

.first, .second {
    text-align: center;
    padding: 1rem;
}

.paginatedContainer {
    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: grid;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
}

.first, .second {
    text-align: center;
    padding: 1rem;
}

DennisOP•6mo ago

Theres a gap the same size as the child element between the two children idk why

MarkBoots•6mo ago

gonna need to see more than this. can you make a codepen/sandbox

DennisOP•6mo ago

Okay sorry. Had to set up a codepen and get the layout working https://codepen.io/dennis777-the-builder/pen/PovLMRe

MarkBoots•6mo ago

ah okay, the gap is because of the translate. it's not nessesarry anymore to translate the second one to the right by default. it already is thanks to the grid https://codepen.io/MarkBoots/pen/WNBWbyL

DennisOP•6mo ago

Sweet man thats exactly it! Truly appriciate it. Off the top of your head would you know how I can prevent the container from expanding past what it needs? (I'm using max-width: 1260px in paginated and it works but I was wondering if it can to do automatically)

MarkBoots•6mo ago

you could do width: fit-content

DennisOP•6mo ago

doesnt seem to do it

MarkBoots•6mo ago

ah no, that indeed wont work, because the children depend on the width i've updated the pen with a possible sollution

DennisOP•6mo ago

Ah alright no worries I really appreciate your help!

Gaming

Programming

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