I've been working on my first website here, and whenever the viewport falls under about 1660 px wide, the grid on the right will stack under the div to its left. This happens at about the point that the first div of the grid approaches the width of its longest line of text, so I'm pretty sure its moving the grid underneath before it will wrap the text inside. How do I get it to stay in place (like how it is when the viewport is at least 1660 px wide) and wrap the text rather than stacking underneath?In case anyone asks, I plan on separately defining the css once the viewport falls under a certain width, where the contents of the grid will be below the div on the left.
I've tried messing with word-wrap and overflow-wrap as well as float:left and even trying different display values. Shrinkwrapping isn't what im looking for, either, because I want the div to become narrower than its contents, and force the text inside to wrap.
Here is the code:
#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;}<div id="container"><!--map--><div> content</div><div id="grid"><div id="mods"> content<div id="scrollbar"> content</div></div><div id="discord"> content</div><div id="blog"><div id="blogcontainer"> content</div></div></div></div>