Question:
I’m looking for a way of doing the following in css. I have 3 divs stacked vertically. I’d like them to be full width and positioned so the middle div (shown in blue) is always in the center of the screen. I’d like the two outer divs (shown in red) to be the same width but go out of the bounds of the window without scrolling. I can manage it horizontally but not vertically for some reason. I’m using tailwind but happy to see plain css solutions if anyone has one.
The following tailwind markup almost works but does not position the divs so the middle one is always in the center.
Answer:
Seems to work as described. Fun challenge. I use container to center content on the page. Add absolute position to content to allow overflow top and display it as flex with vertical direction.If you have better answer, please add a comment about this, thank you!