Почему макет основного контента меняется при открытии модального окна? ⇐ CSS

[Anonymous]

Взгляните на этот код реакции на создание модального окна:

Код: Выделить всё

import * as React from "react";
import "./styles.css";

function Modal({ handleClose }) {
return (



X
Modal



Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ullamcorper morbi
tincidunt ornare massa. Morbi enim nunc faucibus a pellentesque sit
amet. Duis tristique sollicitudin nibh sit amet commodo nulla facilisi
nullam. Eget dolor morbi non arcu risus. Integer eget aliquet nibh
praesent tristique magna sit amet purus. Nullam vehicula ipsum a arcu.
Vitae proin sagittis nisl rhoncus mattis rhoncus.  Risus feugiat in ante
metus dictum at tempor.




);
}

export default function App() {
const [isOpen, setIsOpen] = React.useState(false);
return (

{/* Modal */}
{isOpen &&  setIsOpen(false)} />}

{/* Main Content */}


Test-Modal

{["red", "blue", "green", "pink", "purple", "yellow"].map(
(color, index) => {
return (

);
}
)}
 setIsOpen(true)}>
openModal



);
}

Код: Выделить всё

styles.css

Код: Выделить всё

html {
background-color: black;
color: white;
}

.container {
margin: 0 auto;
max-width: 1100px;
padding: 50px;
position: relative;
}

main {
margin: auto;
padding: 24px;
}

main > header {
position: sticky;
top: 0;
background: black;
text-align: center;
padding: 24px;
}

dialog {
position: fixed;
display: grid;
grid-template-rows: auto 1fr;
top: 40px;
background: transparent;
width: 75vw;
margin: auto;
animation: expand 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
border-radius: 8px;
padding: 32px;
z-index: 10;
color: white;
}

dialog section {
max-height: calc(90vh - 120px);
overflow: auto;
}

dialog button {
position: absolute;
top: 16px;
right: 16px;
width: 32px;
height: 32px;
border-radius: 50%;
}

div:has(dialog) {
background-color: rgba(0, 0, 0, 0.5);
position: fixed;
/* width: 100%; */
/* height: 100%; */
z-index: 9;

display: flex;
align-items: center;
justify-content: center;
inset: 0;
}

.primary {
position: fixed;
bottom: 40px;
right: 40px;
}

Вы можете запустить полный код здесь.
У меня есть несколько вопросов:

• Почему сжимается, а содержимое возвращается наверх, когда я открываю модальное окно?
• Почему я не могу прокручивать содержимое в главном когда открывается модальное окно?

Я работал над этим всю ночь в поисках решения.
Если Я упрощаю модальное окно следующим образом:

Код: Выделить всё

  style={{
backgroundColor: "rgba(0,0,0,0.5)",
zIndex: 9999,
display: "flex",
justifyContent: "center",
alignItems: "center",
inset: 0,
position: "fixed",
}}
onClick={handleClose}
>

some title...
some content

;

Тогда всё в порядке.
Ошибка видимо из css.
Хочу разобраться выясните, что вызвало ошибку и как ее исправить, если модальное окно настолько сложное.

Подробнее здесь: https://stackoverflow.com/questions/790 ... -is-opened