Как я могу вместить все в новое окно и сделать его отзывчивым, когда я увеличиваю или уменьшаю окно и у меня нет полосы ⇐ CSS

[Anonymous]

Когда я открываю новое окно, содержимое выходит за пределы страницы. Я думаю, что использование гибкости и размещение поля вокруг основного элемента div вокруг содержимого исправит это. Я также хочу, чтобы все было соответствующим образом настроено, независимо от того, насколько большим или маленьким я делаю окно.

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

 handleLeaveGame(user.id, id)}>
Leave












Options

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

.room-layout {
display: flex;
width: 97%;
height: 100%;
overflow: hidden;
margin: 30px;
border: 4px solid black;
}

.square-row,
.rectangle-row {
display: flex;
justify-content: center;
width: 100%;
}

.responsive-rectangle {
width: 70vw;
height: 40vh;
padding-bottom: 5vh;
background-color: #bfe6d3;
color: rgb(12, 12, 12);
display: flex;
justify-content: center;
align-items: center;
border: 2px solid #000000;
border-radius: 10px;
font-size: 2vw;
margin: 1vw;
box-sizing: border-box;
position: relative;
}

Вместо этого я пробовал различные методы, например, использование vh или px. Я также попытался настроить размер окна, в котором открываюсь. Я попытался поместить дочерний элемент div внутри room-layout и поместить все содержимое в дочерний элемент. Я попробовал несколько примеров того, у кого была похожая проблема здесь, в Stack Overflow, и это тоже не сработало.


Подробнее здесь: https://stackoverflow.com/questions/790 ... -i-make-th