Flexbox CSS not stacking?

18 hours ago 3

ARTICLE AD BOX

Add min-width: 650px; to the class .col .

It forces the .col element to wrap if it reached the selected width, and you can edit the number in min-width selector to tell when it should wrap (Become in column) and not be squeezed. Here's the entire code edited (With other improvements to make the cols have auto width in vertical mode):

body { margin: 0; display: flex; justify-content: flex-end; } .container { display: flex; flex-direction: column; flex-wrap: flex; gap: 0.5em; width: 650px; padding: 0.5em; z-index: 999; } .row { display: flex; flex-direction: row; flex-wrap: wrap; gap: 0.5em; } .col { display: flex; flex: 1; flex-direction: column; flex-wrap: wrap; gap: 0.5em; border: 1px solid #000; min-width: 650px; } .col-mid { display: flex; flex: 2; flex-direction: column; flex-wrap: wrap; gap: 0.5em; } .col-big { display: flex; flex: 3; flex-direction: column; flex-wrap: wrap; gap: 0.5em; } @media only screen and (max-width: 625px) { body { margin: 0; } .container { max-width: 650px; margin: 0px auto !important; } .col { display: flex; flex: 1; flex-direction: column; flex-wrap: wrap; gap: 0.5em; border: 1px solid #000; min-width: 0; } .row { display: flex; flex-direction: column; flex-wrap: wrap; gap: 0.5em; } } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="/css/main.css" rel="stylesheet" type="text/css" media="all"> <script src="scripts.js" defer></script> <title>Your Website Name Here!</title> </head> <body> <div class="container"> <div class="row"> <div class="col"> <p>text</p> </div> <div class="col"> <p>text</p> </div> <div class="col"> <p>text</p> </div> </div> </div> </body>

You have a lot of extra CSS that is not needed in regards to the HTML you posted. For simplicity of answering your question, I have removed any CSS that was not used by the HTML.

The basic issue is that at the end of the day, you need to provide some sort of width on the "col" classes. Flexbox won't know to wrap them if there isn't some defined width you are trying to display.

body { margin: 0; } .container { width: 100%; padding: 0.5em; } .row { display: flex; flex-direction: row; flex-wrap: wrap; gap: 0.5em; } .col { border: 1px solid #000; width: 200px; } <div class="container"> <div class="row"> <div class="col"> <p>text</p> </div> <div class="col"> <p>text</p> </div> <div class="col"> <p>text</p> </div> </div> </div>

ZombieCode

1,6683 gold badges25 silver badges49 bronze badges

1 Comment

Hello, I apologize for the excess code, as I wasn't sure what was or wasn't needed. Anyways, this doesn't seem to have fixed the problem, at least on the website I'm using (Neocities) instead of just stacking the content on mobile, it all remains on one line together and stretches the container box outside of the viewport. I remain a little frustrated, since at the beginning, it seemed as if my code worked just fine, but after a certain point just broke and did not work again. I'm not sure what the problem might be.

2026-04-20T05:22:11.703Z+00:00

flex-direction:column should be removed from .container class and flex-direction need to be specify on @media query. max-width: 100% should be on @media query. flex-direction: column property should be added on .row class in @media query.

body { margin: 0; } .container { display: flex; flex-wrap: flex; gap: 0.5em; width: 650px; padding: 0.5em; z-index: 999; } .row { display: flex; flex-direction: row; flex-wrap: wrap; gap: 0.5em; } .col { display: flex; flex: 1; flex-direction: column; flex-wrap: wrap; gap: 0.5em; border: 1px solid #000; } .col-mid { display: flex; flex: 2; flex-direction: column; flex-wrap: wrap; gap: 0.5em; } .col-big { display: flex; flex: 3; flex-direction: column; flex-wrap: wrap; gap: 0.5em; } @media only screen and (max-width: 625px) { body { margin: 0; } .container { max-width: 100%; flex-direction: column; margin: 0px auto !important; } .row { flex-direction: column; } } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="/css/main.css" rel="stylesheet" type="text/css" media="all"> <script src="scripts.js" defer></script> <title>Your Website Name Here!</title> </head> <body> <div class="container"> <div class="row"> <div class="col"> <p>text</p> </div> <div class="col"> <p>text</p> </div> <div class="col"> <p>text</p> </div> </div> </div> </body> </html>