CSS: display flex div property align-items: center moves content outside of display: flex div

[MaskedRedstonerProZ]

Summary

On my personal website, I have a div of sorts containing the tab switcher for a list of apps, in ladybird, that type switcher appears outside the boundaries of it's container div, made visible in the provided screenshots by the rose coloured rectangle, I have pinpointed the issue to be with the css property allign-items: center, or rather simply items-center for those that use tailwind css, for my website I could simply remove the class, as it is supposed to not do anything really, but that's beside the point, ps. the rose coloured rectangle is only present in the screenshots strictly for your convenience, it is NOT, however present on the actual site which I have linked multiple times in this report

Operating system

Linux

Steps to reproduce

1. Open Ladybird
2. Go to a website which has elements built with display: flex, specifically the align-items: center property, for example my own portfolio
3. Observe div which should be in this case centred, present off to the side relative to the rest of the content, outside of container boundaries in the case of non-transparent containers

Expected behavior

Expected behaviour is to have the content centered on the axis perpendicular to the container direction (vertical in the case of a row, horizontal in the case of a column)

Actual behavior

Actual behaviour is that it sets the content off to the side, basically outside of the normal container boundaries on the axis perpendicular to the container direction (vertical in the case of a row, horizontal in the case of a column)

URL for a reduced test case

https://maskedredstonerproz.vercel.app

HTML/SVG/etc. source for a reduced test case

<div style="--tabs-radius:var(--mantine-radius-xl);--tabs-color:#c80000" class="flex flex-col justify-center items-center bg-rose-700 m_89d60db1 mantine-Tabs-root" data-variant="pills" data-orientation="horizontal" id="mantine-vvd7zr6dn"><div style="--tabs-justify:center" class="m_89d33d6d mantine-Tabs-list bg-black p-3 rounded-full shadow-xl shadow-gray-950 min-w-full" data-variant="pills" data-grow="true" data-orientation="horizontal" role="tablist" aria-orientation="horizontal"><button class="mantine-focus-auto m_c3381914 hover:bg-standard-red hover:text-standard-blue data-active:bg-standard-red data-active:text-standard-blue m_4ec4dce6 mantine-Tabs-tab m_87cf2631 mantine-UnstyledButton-root" data-variant="pills" data-active="true" data-orientation="horizontal" type="button" role="tab" id="mantine-vvd7zr6dn-tab-0" aria-selected="true" tabindex="0" aria-controls="mantine-vvd7zr6dn-panel-0"><span class="mantine-Tabs-tabLabel">Android</span></button><button class="mantine-focus-auto m_c3381914 hover:bg-standard-red hover:text-standard-blue data-active:bg-standard-red data-active:text-standard-blue m_4ec4dce6 mantine-Tabs-tab m_87cf2631 mantine-UnstyledButton-root" data-variant="pills" data-orientation="horizontal" type="button" role="tab" id="mantine-vvd7zr6dn-tab-1" aria-selected="false" tabindex="-1" aria-controls="mantine-vvd7zr6dn-panel-1"><span class="mantine-Tabs-tabLabel">Web</span></button><button class="mantine-focus-auto m_c3381914 hover:bg-standard-red hover:text-standard-blue data-active:bg-standard-red data-active:text-standard-blue m_4ec4dce6 mantine-Tabs-tab m_87cf2631 mantine-UnstyledButton-root" data-variant="pills" data-orientation="horizontal" type="button" role="tab" id="mantine-vvd7zr6dn-tab-2" aria-selected="false" tabindex="-1" aria-controls="mantine-vvd7zr6dn-panel-2"><span class="mantine-Tabs-tabLabel">Others</span></button></div><div class="m_b0c91715 mantine-Tabs-panel py-[30px] min-w-full" data-orientation="horizontal" role="tabpanel" id="mantine-vvd7zr6dn-panel-0" aria-labelledby="mantine-vvd7zr6dn-tab-0"><div style="--sa-corner-width: 0px; --sa-corner-height: 0px;" class="shadow-xl shadow-gray-950 m_d57069b5 mantine-ScrollArea-root"><div style="overflow-x: scroll; overflow-y: scroll;" class="m_c0783ff9 mantine-ScrollArea-viewport" data-scrollbars="xy"><div style="min-width: 100%; display: table;"><div style="row-gap: calc(1.875rem * var(--mantine-scale)); column-gap: calc(1.875rem * var(--mantine-scale)); align-items: center; flex-direction: column;" class="m_8bffd616 mantine-Flex-root __m__-r2"><div style="justify-content: space-between; flex-direction: column;" class="bg-black rounded-xl p-5 shadow-xl shadow-gray-950 min-h-[70vh] min-w-full m_8bffd616 mantine-Flex-root __m__-r4"><div style="row-gap: calc(0.3125rem * var(--mantine-scale)); align-items: center; flex-direction: column;" class="m_8bffd616 mantine-Flex-root __m__-r6"><img alt="app logo" loading="lazy" width="250" height="250" decoding="async" data-nimg="1" style="color: transparent;" src="https://gitlab.com/MaskedRedstonerProZ/app-data/-/raw/main/images/logos/TextSync.svg"><h1 style="--title-fz: calc(3.75rem * var(--mantine-scale)); --title-lh: var(--mantine-h1-line-height); --title-fw: var(--mantine-h1-font-weight);" class="__className_0f05b8 select-none m_8a5d1357 mantine-Title-root" data-order="1">TextSync</h1><div style="flex-direction: row;" class="m_8bffd616 mantine-Flex-root __m__-r9"><div style="flex-direction: column;" class="m_8bffd616 mantine-Flex-root __m__-rb"><p class="mantine-focus-auto text-wrap select-none m_b6d8b162 mantine-Text-root">TextSync is a simple text editor, with the additional ability to synchronise text files between your devices. It accomplishes that via a server that users have to set up for themselves, instructions are linked inside the app.</p><div style="height: calc(1.25rem * var(--mantine-scale)); min-height: calc(1.25rem * var(--mantine-scale));" class=""></div><p class="mantine-focus-auto text-wrap select-none m_b6d8b162 mantine-Text-root">Home Screen</p><div style="height: calc(1.25rem * var(--mantine-scale)); min-height: calc(1.25rem * var(--mantine-scale));" class=""></div><p class="mantine-focus-auto text-wrap select-none m_b6d8b162 mantine-Text-root">The Home Screen is well, the main screen, that's where the actual text editing takes place, and where the users spend 99% of the time using the app.</p></div><style data-mantine-styles="inline">.__m__-ri{--carousel-slide-gap:0rem;--carousel-slide-size:100%;}</style><div style="--carousel-control-size: calc(1.625rem * var(--mantine-scale)); --carousel-controls-offset: var(--mantine-spacing-sm); width: calc(18.75rem * var(--mantine-scale)); height: calc(31.5rem * var(--mantine-scale));" class="m_17884d0f mantine-Carousel-root __m__-ri" data-orientation="horizontal" data-include-gap-in-size="true"><div class="m_a2dae653 mantine-Carousel-viewport"><div class="m_fcd81474 mantine-Carousel-container" data-orientation="horizontal" style="transform: translate3d(0px, 0px, 0px);"><div class="m_d98df724 mantine-Carousel-slide flex flex-row justify-center" data-orientation="horizontal" style="transform: translate3d(0px, 0px, 0px);"><img alt="screenshot" loading="lazy" width="200" height="504" decoding="async" data-nimg="1" class="border-4 border-solid border-standard-red-important border-opacity-75 rounded-md" style="color: transparent;" srcset="/_next/image?url=https%3A%2F%2Fgitlab.com%2FMaskedRedstonerProZ%2Fapp-data%2F-%2Fraw%2Fmain%2Fimages%2Fscreenshots%2FScreenshot_01_TextSync.jpg&amp;w=256&amp;q=75 1x, /_next/image?url=https%3A%2F%2Fgitlab.com%2FMaskedRedstonerProZ%2Fapp-data%2F-%2Fraw%2Fmain%2Fimages%2Fscreenshots%2FScreenshot_01_TextSync.jpg&amp;w=640&amp;q=75 2x" src="/_next/image?url=https%3A%2F%2Fgitlab.com%2FMaskedRedstonerProZ%2Fapp-data%2F-%2Fraw%2Fmain%2Fimages%2Fscreenshots%2FScreenshot_01_TextSync.jpg&amp;w=640&amp;q=75"></div><div class="m_d98df724 mantine-Carousel-slide flex flex-row justify-center" data-orientation="horizontal"><img alt="screenshot" loading="lazy" width="200" height="504" decoding="async" data-nimg="1" class="border-4 border-solid border-standard-red-important border-opacity-75 rounded-md" style="color: transparent;" srcset="/_next/image?url=https%3A%2F%2Fgitlab.com%2FMaskedRedstonerProZ%2Fapp-data%2F-%2Fraw%2Fmain%2Fimages%2Fscreenshots%2FScreenshot_02_TextSync.jpg&amp;w=256&amp;q=75 1x, /_next/image?url=https%3A%2F%2Fgitlab.com%2FMaskedRedstonerProZ%2Fapp-data%2F-%2Fraw%2Fmain%2Fimages%2Fscreenshots%2FScreenshot_02_TextSync.jpg&amp;w=640&amp;q=75 2x" src="/_next/image?url=https%3A%2F%2Fgitlab.com%2FMaskedRedstonerProZ%2Fapp-data%2F-%2Fraw%2Fmain%2Fimages%2Fscreenshots%2FScreenshot_02_TextSync.jpg&amp;w=640&amp;q=75"></div><div class="m_d98df724 mantine-Carousel-slide flex flex-row justify-center" data-orientation="horizontal"><img alt="screenshot" loading="lazy" width="200" height="504" decoding="async" data-nimg="1" class="border-4 border-solid border-standard-red-important border-opacity-75 rounded-md" style="color: transparent;" srcset="/_next/image?url=https%3A%2F%2Fgitlab.com%2FMaskedRedstonerProZ%2Fapp-data%2F-%2Fraw%2Fmain%2Fimages%2Fscreenshots%2FScreenshot_03_TextSync.jpg&amp;w=256&amp;q=75 1x, /_next/image?url=https%3A%2F%2Fgitlab.com%2FMaskedRedstonerProZ%2Fapp-data%2F-%2Fraw%2Fmain%2Fimages%2Fscreenshots%2FScreenshot_03_TextSync.jpg&amp;w=640&amp;q=75 2x" src="/_next/image?url=https%3A%2F%2Fgitlab.com%2FMaskedRedstonerProZ%2Fapp-data%2F-%2Fraw%2Fmain%2Fimages%2Fscreenshots%2FScreenshot_03_TextSync.jpg&amp;w=640&amp;q=75"></div><div class="m_d98df724 mantine-Carousel-slide flex flex-row justify-center" data-orientation="horizontal"><img alt="screenshot" loading="lazy" width="200" height="504" decoding="async" data-nimg="1" class="border-4 border-solid border-standard-red-important border-opacity-75 rounded-md" style="color: transparent;" srcset="/_next/image?url=https%3A%2F%2Fgitlab.com%2FMaskedRedstonerProZ%2Fapp-data%2F-%2Fraw%2Fmain%2Fimages%2Fscreenshots%2FScreenshot_04_TextSync.jpg&amp;w=256&amp;q=75 1x, /_next/image?url=https%3A%2F%2Fgitlab.com%2FMaskedRedstonerProZ%2Fapp-data%2F-%2Fraw%2Fmain%2Fimages%2Fscreenshots%2FScreenshot_04_TextSync.jpg&amp;w=640&amp;q=75 2x" src="/_next/image?url=https%3A%2F%2Fgitlab.com%2FMaskedRedstonerProZ%2Fapp-data%2F-%2Fraw%2Fmain%2Fimages%2Fscreenshots%2FScreenshot_04_TextSync.jpg&amp;w=640&amp;q=75"></div><div class="m_d98df724 mantine-Carousel-slide flex flex-row justify-center" data-orientation="horizontal"><img alt="screenshot" loading="lazy" width="200" height="504" decoding="async" data-nimg="1" class="border-4 border-solid border-standard-red-important border-opacity-75 rounded-md" style="color: transparent;" srcset="/_next/image?url=https%3A%2F%2Fgitlab.com%2FMaskedRedstonerProZ%2Fapp-data%2F-%2Fraw%2Fmain%2Fimages%2Fscreenshots%2FScreenshot_05_TextSync.jpg&amp;w=256&amp;q=75 1x, /_next/image?url=https%3A%2F%2Fgitlab.com%2FMaskedRedstonerProZ%2Fapp-data%2F-%2Fraw%2Fmain%2Fimages%2Fscreenshots%2FScreenshot_05_TextSync.jpg&amp;w=640&amp;q=75 2x" src="/_next/image?url=https%3A%2F%2Fgitlab.com%2FMaskedRedstonerProZ%2Fapp-data%2F-%2Fraw%2Fmain%2Fimages%2Fscreenshots%2FScreenshot_05_TextSync.jpg&amp;w=640&amp;q=75"></div></div></div><div class="m_39bc3463 mantine-Carousel-controls" data-orientation="horizontal"><button class="mantine-focus-auto bg-standard-red-important text-standard-blue border border-solid border-standard-red-important size-8 m_64f58e10 mantine-Carousel-control m_87cf2631 mantine-UnstyledButton-root" type="button" tabindex="0"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="transform: rotate(90deg); width: calc(1rem * var(--mantine-scale)); height: calc(1rem * var(--mantine-scale)); display: block;"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button><button class="mantine-focus-auto bg-standard-red-important text-standard-blue border border-solid border-standard-red-important size-8 m_64f58e10 mantine-Carousel-control m_87cf2631 mantine-UnstyledButton-root" type="button" tabindex="0"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="transform: rotate(-90deg); width: calc(1rem * var(--mantine-scale)); height: calc(1rem * var(--mantine-scale)); display: block;"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button></div></div></div></div><div style="align-items: center; flex-direction: row;" class="m_8bffd616 mantine-Flex-root __m__-rr"><div style="align-items: center; flex-direction: row;" class="m_8bffd616 mantine-Flex-root __m__-rt"><div style="align-items: center; flex-direction: row;" class="m_8bffd616 mantine-Flex-root __m__-rv"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-git cursor-pointer" style="width: calc(3rem * var(--mantine-scale)); height: calc(3rem * var(--mantine-scale)); color: rgb(247, 240, 245);"><path d="M16 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12 8m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12 16m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M12 15v-6"></path><path d="M15 11l-2 -2"></path><path d="M11 7l-1.9 -1.9"></path><path d="M13.446 2.6l7.955 7.954a2.045 2.045 0 0 1 0 2.892l-7.955 7.955a2.045 2.045 0 0 1 -2.892 0l-7.955 -7.955a2.045 2.045 0 0 1 0 -2.892l7.955 -7.955a2.045 2.045 0 0 1 2.892 0z"></path></svg><div style="width: calc(0.3125rem * var(--mantine-scale)); min-width: calc(0.3125rem * var(--mantine-scale));" class=""></div><a class="text-standard-white pl-3 no-underline hover:underline" href="https://gitlab.com/MaskedRedstonerProZ/TextSync" target="_blank" rel="noopener noreferer"></a></div><div style="width: calc(0.625rem * var(--mantine-scale)); min-width: calc(0.625rem * var(--mantine-scale));" class=""></div></div><div style="align-items: center; flex-direction: row;" class="m_8bffd616 mantine-Flex-root __m__-r13"><div style="align-items: center; flex-direction: row;" class="m_8bffd616 mantine-Flex-root __m__-r15"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-android cursor-pointer" style="width: calc(3rem * var(--mantine-scale)); height: calc(3rem * var(--mantine-scale)); color: rgb(247, 240, 245);"><path d="M4 10l0 6"></path><path d="M20 10l0 6"></path><path d="M7 9h10v8a1 1 0 0 1 -1 1h-8a1 1 0 0 1 -1 -1v-8a5 5 0 0 1 10 0"></path><path d="M8 3l1 2"></path><path d="M16 3l-1 2"></path><path d="M9 18l0 3"></path><path d="M15 18l0 3"></path></svg><div style="width: calc(0.3125rem * var(--mantine-scale)); min-width: calc(0.3125rem * var(--mantine-scale));" class=""></div><a href="https://www.dropbox.com/scl/fi/9rvza71c65vbdudxbhhfj/TextSync.apk?rlkey=ielexr5rxprev8js0wp3jz57x&amp;st=ukt226qa&amp;dl=1" class="text-standard-white hover:text-standard-white no-underline hover:underline"></a></div></div></div></div></div></div></div></div></div><div style="display:none" class="m_b0c91715 mantine-Tabs-panel py-[30px] min-w-full" data-orientation="horizontal" role="tabpanel" id="mantine-vvd7zr6dn-panel-1" aria-labelledby="mantine-vvd7zr6dn-tab-1"><div class="bg-black rounded-full py-2 shadow-xl shadow-gray-950 m_4451eb3a mantine-Center-root">Error 404: Projects not found!</div></div><div style="display:none" class="m_b0c91715 mantine-Tabs-panel py-[30px] min-w-full" data-orientation="horizontal" role="tabpanel" id="mantine-vvd7zr6dn-panel-2" aria-labelledby="mantine-vvd7zr6dn-tab-2"><div class="bg-black rounded-full py-2 shadow-xl shadow-gray-950 m_4451eb3a mantine-Center-root">Error 404: Projects not found!</div></div></div>

Log output and (if possible) backtrace

N/A

Screenshots or screen recordings

what it looks like:

what it should look like:

Build flags or config settings

No response

Contribute a patch?

• I’ll contribute a patch for this myself.