Elements going out of container using flexbox

Question

I am doing some exercises to learn how flexbox works, and there is something that is bugging me and I would like to know how this works. For some reason, when I apply display:flex; to my container, when I reduce the screen size the elements go out of the div as you can see in this picture.

This one here is the mobile view, look how the border dissapears:

.box {
  color: white;
  font-size: 60px;
  text-align: center;
  text-shadow: 4px 4px 0 rgba(0, 0, 0, .1);
}

.box1 {
  background-color: rgb(0, 118, 57);
}

.box2 {
  background-color: blueviolet;
}

.box3 {
  background-color: chartreuse;
}

.box4 {
  background-color: darkgoldenrod;
}

.box5 {
  background-color: darkolivegreen;
}

.box6 {
  background-color: dodgerblue;
}

.box7 {
  background-color: greenyellow;
}

.box8 {
  background-color: mediumseagreen;
}

.box9 {
  background-color: orange;
}

.box10 {
  background-color: steelblue;
}

.container {
  display: flex;
  border: 7px solid black;
  margin: 22px 10px;
  width: 80%;
}

.box {
  flex: 1;
  width: 50%;
  padding: 20px;
  /* flex-flow: row wrap; */
  /* margin: 22px; */
}

<body>
  <div class="container">
    <div class="box box1">one </div>
    <div class="box box2">two </div>
    <div class="box box3">three </div>
    <div class="box box4">four </div>
    <div class="box box5">five </div>
    <div class="box box6">six </div>
    <!-- <div class="box box7">7</div> -->
    <!-- <div class="box box8">8</div> -->
    <!-- <div class="box box9">9</div> -->
    <!-- <div class="box box10">10</div> -->
  </div>
</body>

How Can I prevent this from happening? I have tried using percentage width and also properties as flex shrink, but there are no changes.

1) Intentions of the second boxare not looking good. 2) The width of the `.box` is due to the text. Add a media query to reduce the `font-size` for mobile! — Manas Khandelwal, Apr 14 '21 at 04:38
either use (1) flex-wrap:wrap on container or (2) min-width:0 on the item — Temani Afif, Apr 14 '21 at 10:43

score 0 · Accepted Answer · answered Apr 14 '21 at 05:03

Please note that when you use flex mode, especially in mobile size, you have to control the size of the children, but this is not done and you have a very large size of the children in the font size. The solution is to use media query to control this.

@media screen and (max-width: 678px) {
  .box {
    flex: 1 1 16%;
    font-size: 15px;
  }
.container{
width:100%;
}
}

score 0 · Answer 2 · answered Apr 14 '21 at 05:07

0

if you want the child elements to wrap, use flex-wrap: wrap; in the parent element.

.container{
  display: flex;
  flex-wrap: wrap;
}

answered Apr 14 '21 at 05:07

Rahul Dahal

152
1
12

score 0 · Answer 3 · answered Apr 14 '21 at 05:29

use flex-wrap to wrap.

 .container {
      ...
      flex-wrap: wrap;
    }

.box {
  color: white;
  font-size: 60px;
  text-align: center;
  text-shadow: 4px 4px 0 rgba(0, 0, 0, .1);
}

.box1 {
  background-color: rgb(0, 118, 57);
}

.box2 {
  background-color: blueviolet;
}

.box3 {
  background-color: chartreuse;
}

.box4 {
  background-color: darkgoldenrod;
}

.box5 {
  background-color: darkolivegreen;
}

.box6 {
  background-color: dodgerblue;
}

.box7 {
  background-color: greenyellow;
}

.box8 {
  background-color: mediumseagreen;
}

.box9 {
  background-color: orange;
}

.box10 {
  background-color: steelblue;
}

.container {
  display: flex;
  border: 7px solid black;
  margin: 22px 10px;
  width: 80%;
  flex-wrap: wrap;
}

.box {
  flex: 1;
  width: 50%;
  padding: 20px;
  /* flex-flow: row wrap; */
  /* margin: 22px; */
}

<body>
  <div class="container">
    <div class="box box1">one </div>
    <div class="box box2">two </div>
    <div class="box box3">three </div>
    <div class="box box4">four </div>
    <div class="box box5">five </div>
    <div class="box box6">six </div>
    <!-- <div class="box box7">7</div> -->
    <!-- <div class="box box8">8</div> -->
    <!-- <div class="box box9">9</div> -->
    <!-- <div class="box box10">10</div> -->
  </div>
</body>

Elements going out of container using flexbox

3 Answers3