Как сделать текст в сетке, а не привести к складыванию сетки под блоком рядом с ней? ⇐ CSS

[Anonymous]

Я работал над своим первым веб -сайтом здесь, и всякий раз, когда просмотр падает под ширину около 1660 годов в год, сетка справа будет складываться под Div слева. Это происходит примерно в том, что первый Div в сетке приближается к ширине самой длинной линии текста, поэтому я почти уверен, что она перемещает сетку внизу, прежде чем она завершит текст внутрь. Как мне заставить его остаться на месте (например, как это, когда просмотр имеет ширину как минимум 1660 год) и обернуть текст, а не укладываться внизу? Ну и поплавок: слева и даже пробуют разные значения отображения. ShrinkPrapping тоже не то, что я ищу, потому что я хочу, чтобы Div стал более узким < /em>, чем его содержимое, и заставляла текст внутри обертывания. PrettyPrint-Override ">

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

#container {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 1em;
}

/*div on the left*/
#map {
width: 790px;
height: 670px;
border-image: url("assets/frame.png") 90 / 100px;
padding: 90px;
}

#grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-column-gap: 1em;
padding: 1em;
flex-grow: 1;
max-width: 850px;
}

/*div containing the text that i want to wrap*/
#mods {
grid-area: 1 / 1 / 2 / 2;
max-height: 400px;
background-color: cyan;
border-image: linear-gradient(red, orange, yellow, lime, cyan, blue, indigo, purple, deeppink) 10/10px;
}

/*inside of the above div, contains the text i want to wrap*/
#scrollbar {
overflow-y: scroll;
max-height: 300px;
margin: 0 15px;
}

#discord {
grid-area: 1 / 2 / 2 / 3;
overflow-y: clip;
}

#blog {
grid-area: 2 / 1 / 3 / 3;
background-image: url('https://dl.glitter-graphics.com/pub/3086/3086545fdogblrjva.gif');
background-attachment: fixed;
background-repeat: repeat;
box-shadow: 6px 6px 6px rgba(22, 0, 80, 0.88);
border: 6px ridge #f2ff60;
max-height: 380px;
overflow-y: scroll;
}

#blogcontainer {
margin: 1em auto;
max-width: 503px;
justify-content: center;
background-color: lightyellow;
border: thin dashed #5F0247;
padding: 0 20px;
}< /code>



content


content

content



content


content

Подробнее здесь: https://stackoverflow.com/questions/797 ... k-undernea