Flexbox is not breaking the line [duplicate]

I'm studying flexbox, and I would like to make a layout like the one below:

enter image description here

So I made the following code:

.container {
  display: flex;
  gap: 26px;
}

.flex50 {
  flex: 50%;
  flex-wrap: wrap;
  min-width: calc(50% - 13px);
  background-color: #000000;
  margin-bottom: 26px;
}

.flex33 {
  flex: 33.33333%;
  flex-wrap: wrap;
  min-width: 33.33333%;
  background-color: #000000;
  margin-bottom: 26px;
}

<div class="container">
  <div class="flex50">
    1 50
  </div>
  <div class="flex50">
    2 50
  </div>
  <div class="flex33">
    1 33
  </div>
  <div class="flex33">
    2 33
  </div>
  <div class="flex33">
    3 33
  </div>
  <div class="flex33">
    4 33
  </div>
</div>

But as you can see, the line is not breaking as it should. Where am I wrong?

Add flex-wrap: wrap property to .container class so that flex can wrap itself when it goes out of viewport.

.container{
    display: flex;
    flex-wrap: wrap;
    gap: 26px;
}
.flex50{
    flex: 50%;
    flex-wrap: wrap;
    min-width: calc(50% - 13px);
  background-color: #000000;
    margin-bottom: 26px;
}
.flex33{
    flex: 33.33333%;
    flex-wrap: wrap;
    min-width: 33.33333%;
    background-color: #000000;
    margin-bottom: 26px;
}

<div class="container">
    <div class="flex50">
        1 50
    </div>
    <div class="flex50">
        2 50
    </div>
    <div class="flex33">
        1 33
    </div>
    <div class="flex33">
        2 33
    </div>
    <div class="flex33">
        3 33
    </div>
    <div class="flex33">
        4 33
    </div>
</div>

Add flex-wrap: wrap property to .container class so that flex can wrap itself when it goes out of viewport.

.container{
    height: 20rem; /* set some height, can be any height that you need */
    display: flex;
    flex-wrap: wrap; 
}
.flex50{
    flex-basis: 50%;
    background-color: #000000;
    margin-bottom: 26px;
    margin: 0.5rem; /* sets some separation between elements */
    max-width: calc(50% - 1rem); /* includes margin in elemets width */
}
.flex33{
    flex-basis: 33.33333%;
    background-color: #000000;
    margin-bottom: 26px;
    margin: 0.5rem; /* sets some separation between elements */
    max-width: calc(33.3333% - 1rem); /* includes margin in elemets width */
}

<div class="container">
    <div class="flex50">
        1 50
    </div>
    <div class="flex50">
        2 50
    </div>
    <div class="flex33">
        1 33
    </div>
    <div class="flex33">
        2 33
    </div>
    <div class="flex33">
        3 33
    </div>
    <div class="flex33">
        4 33
    </div>
</div>

Flexbox is not breaking the line [duplicate]

Related

Recent Posts