flex-wrap isn't wrapping inside the container

Question

Very new to css and html, and am following along a udemy course and though I've followed along the instructor's code to a tee, my flex-wrap just isn't wrapping inside the container. Here's what I have so far:

body {
  font-family: 'Open Sans', sans-serif;
}

h1 {
  text-align: center;
}

#container {
  background-color: #003049;
  width: 90%;
  height: 500px;
  margin: 0 auto;
  border: 5px solid #003049;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  flex-wrap: wrap;
}

#container div {
  width: 600px;
  height: 200px;
  text-align: center;
}

Let's Play With Flexbox

when i set it to flex-wrap: nowrap; it seems to be fine and stays within #container. But when I change it to flex-wrap: wrap; or flex-wrap: wrap-reverse; the colored div boxes go outside #container. Any help?

user_8246359 · Answer

Your #container div has a fixed height of 500px which the browser will respect and not break. Setting it to height: 100% will allow the container to change height as required.

#container {
    background-color: #003049;
    width: 90%;
    height: 100%;
    margin: 0 auto;
    border: 5px solid #003049;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: wrap;    
}

user_14251221 · Answer

Don't set a height. Let the browser render it for you.

body {
  font-family: 'Open Sans', sans-serif;
}

h1 {
  text-align: center;
}

#container {
  background-color: #003049;
  width: 90%;
  margin: 0 auto;
  border: 5px solid #003049;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  flex-wrap: wrap;
}

#container div {
  width: 600px;
  height: 200px;
  text-align: center;
}

Let's Play With Flexbox

user_5641669 · Answer

There are two possible solutions:

1.) Add overflow-y: auto; to the flex-container to allow its contents to scroll inside it while its fixed height is kept:

body {
    font-family: 'Open Sans', sans-serif;
}

h1 {
    text-align: center;
}

#container {
    background-color: #003049;
    width: 90%;
    height: 500px;
    overflow-y: auto;
    margin: 0 auto;
    border: 5px solid #003049;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: wrap;    
}

#container div{
    width: 600px;
    height: 200px;
    text-align:center;
}

Let's Play With Flexbox

2.) Or, as a second solution, just erase the heigth setting for the flex container, which will set its height to auto , allowing it to grow as needed:

body {
    font-family: 'Open Sans', sans-serif;
}

h1 {
    text-align: center;
}

#container {
    background-color: #003049;
    width: 90%;
    margin: 0 auto;
    border: 5px solid #003049;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: wrap;    
}

#container div{
    width: 600px;
    height: 200px;
    text-align:center;
}

Let's Play With Flexbox

flex-wrap isn't wrapping inside the container

3 Answers