0

Cut content

Using tailwind here, but it should be readable, also removed all unnecessary classes.

<div class="h-full min-h-full w-full left-0 top-0 fixed flex tw-box-border justify-center items-center overflow-y-auto min-h-250" style="z-index: 99999">
    <div class="w-800 min-w-250 max-w-full flex-col items-center justify-center">
        CONTENT HERE
    </div>
</div>

I got a fixed wrapper and a modal within. On small screens, even with overflow-y: auto, the content overlaps the wrapper on the vertical axis and is hidden. I guess it's a problem with the flex property. Read about it here on SO but couldn't fix it. Any suggestions?

temp
  • 519
  • 7
  • 18
  • I can't tell from the image what the issue is. Please share a reproducible example. – Tim R Aug 23 '23 at 05:47
  • @TimR The problem is that the content gets cut vertically when reducing the screen size. It gets pushed out top the same amount it ads overflow on the bottom. – temp Aug 23 '23 at 05:51
  • Due to `fixed` with `items-center` – Tim R Aug 23 '23 at 06:13
  • @TimR Also with `absolute` the problem exists. But how to fix this? One way would be to create a relative element inside the wrapper and position the child absolute. But that seems ugly. – temp Aug 23 '23 at 06:30

1 Answers1

0

All right, thanks to @Asons answer on this post it seems content always will be cut of using align-items: center;. So some "solution" will be using media-queries aligning the content to start to prevent this behavior on smaller screens.

temp
  • 519
  • 7
  • 18