CSS: Flex is resizing div on next row

Question

My problem is that whenever I resize the window, the divs should warp to the next row if there is not place with the same size as all the other divs.

View this in "Full Page" and try to resize yourself.

<html>
<body>
  <div id="wrapper" style="display: flex; width: 100%; flex-wrap: wrap; justify-content: center;">
    <div id="content" style="display: inline-block; flex: 13px; text-align: center; background-color: red; border: 3px solid grey; height: 200px; min-width: 150px; max-width: 250px;">
      Hey!
    </div>
    <div id="content" style="display: inline-block; flex: 13px; text-align: center; background-color: red; border: 3px solid grey; height: 200px; min-width: 150px; max-width: 250px;">
      Hey!
    </div>
    <div id="content" style="display: inline-block;flex: 13px; text-align: center; background-color: red; border: 3px solid grey; height: 200px; min-width: 150px; max-width: 250px;">
      Hey!
    </div>
    <div id="content" style="display: inline-block;flex: 13px; text-align: center; background-color: red; border: 3px solid grey; height: 200px; min-width: 150px; max-width: 250px;">
      Hey!
    </div>
    <div id="content" style="display: inline-block;flex: 13px; text-align: center; background-color: red; border: 3px solid grey; height: 200px; min-width: 150px; max-width: 250px;">
      Hey!
    </div>
    <div id="content" style="display: inline-block;flex: 13px; text-align: center; background-color: red; border: 3px solid grey; height: 200px; min-width: 150px; max-width: 250px;">
      Hey!
    </div>
  </div>
</body>
</html>

This is how it should look like:

[Equal width flex items even after they wrap](https://stackoverflow.com/q/44154580/3597276) — Michael Benjamin, Nov 18 '17 at 15:16

score 1 · Answer 1 · answered Nov 18 '17 at 12:01

Change justify-content from center to flex-start in #wrapper which is by default is flex-start and then it align child divs to left every time when user resize.

<div id="wrapper" style="display: flex; width: 100%; flex-wrap: wrap; justify-content:flex-start;">
    <div id="content" style="display: inline-block; flex: 13px; text-align: center; background-color: red; border: 3px solid grey; height: 200px; min-width: 150px; max-width: 250px;">
      Hey!
    </div>
    <div id="content" style="display: inline-block; flex: 13px; text-align: center; background-color: red; border: 3px solid grey; height: 200px; min-width: 150px; max-width: 250px;">
      Hey!
    </div>
    <div id="content" style="display: inline-block;flex: 13px; text-align: center; background-color: red; border: 3px solid grey; height: 200px; min-width: 150px; max-width: 250px;">
      Hey!
    </div>
    <div id="content" style="display: inline-block;flex: 13px; text-align: center; background-color: red; border: 3px solid grey; height: 200px; min-width: 150px; max-width: 250px;">
      Hey!
    </div>
    <div id="content" style="display: inline-block;flex: 13px; text-align: center; background-color: red; border: 3px solid grey; height: 200px; min-width: 150px; max-width: 250px;">
      Hey!
    </div>
    <div id="content" style="display: inline-block;flex: 13px; text-align: center; background-color: red; border: 3px solid grey; height: 200px; min-width: 150px; max-width: 250px;">
      Hey!
    </div>
  </div>

OP does not ask for left align, they ask for equal width, which also is shown with the posted image. — Asons, Nov 18 '17 at 14:52
Yeah @LGSon just read that again, OP must have corrected me that this is not what I'm trying. +1 learned something new from your solution. — frnt, Nov 18 '17 at 15:06

Asons · Accepted Answer · 2017-11-18T15:39:32.543

They can't have the same size on 2nd row with the given setup.

And reason is when you set flex: 13px, it means flex: 1 1 13px, hence they will grow, if there is space left, until they reach the max-width, and when to little space, they will shrink until reaching the min-width.

There is also no possibilities to detect when an item wrap, so to keep the min/max-width concept you need to add a few media query's.

Note, the !important used in the CSS is needed to override the inline value of 250px

Fiddle demo

Stack snippet

body {
   margin: 0;
}
#wrapper div {
  box-sizing: border-box;
}
@media (max-width: 900px) {
  #wrapper div:nth-child(6) {                /*  6th child  */
    max-width: calc(100% / 5) !important;
  }
}
@media (max-width: 750px) {
  #wrapper div:nth-child(n+5) {              /*  from 5th child  */
    max-width: calc(100% / 4) !important;
  }
}
@media (max-width: 600px) {                  /*  from 4th child  */
  #wrapper div:nth-child(n+4) {
    max-width: 250px !important;
  }
}

<div id="wrapper" style="display: flex; width: 100%; flex-wrap: wrap; justify-content: center;">
    <div id="content1" style="display: inline-block; flex: 13px; text-align: center; background-color: red; border: 3px solid grey; height: 200px; min-width: 150px; max-width: 250px;">
      Hey!
    </div>
    <div id="content2" style="display: inline-block; flex: 13px; text-align: center; background-color: red; border: 3px solid grey; height: 200px; min-width: 150px; max-width: 250px;">
      Hey!
    </div>
    <div id="content3" style="display: inline-block;flex: 13px; text-align: center; background-color: red; border: 3px solid grey; height: 200px; min-width: 150px; max-width: 250px;">
      Hey!
    </div>
    <div id="content4" style="display: inline-block;flex: 13px; text-align: center; background-color: red; border: 3px solid grey; height: 200px; min-width: 150px; max-width: 250px;">
      Hey!
    </div>
    <div id="content5" style="display: inline-block;flex: 13px; text-align: center; background-color: red; border: 3px solid grey; height: 200px; min-width: 150px; max-width: 250px;">
      Hey!
    </div>
    <div id="content6" style="display: inline-block;flex: 13px; text-align: center; background-color: red; border: 3px solid grey; height: 200px; min-width: 150px; max-width: 250px;">
      Hey!
    </div>
  </div>

score 0 · Answer 3 · edited Nov 18 '17 at 15:10

Remove flex: 13px; from the div. Also, you are using same id for all the divs, please remove that. I have used class instead.

Below is the solution

          #wrapper {
            display: flex;
            width: 100%;
            flex-wrap: wrap;
            justify-content: center;
          }
          .content {
             text-align: center;
             background-color: red;
             border: 3px solid grey;
             height: 200px;
             min-width: 150px;
             max-width: 250px;
          }

<html>
      <head>
      </head>
      <body>
        <div id="wrapper">
          <div class="content">Hey!</div>
          <div class="content">Hey!</div>
          <div class="content">Hey!</div>
          <div class="content">Hey!</div>
          <div class="content">Hey!</div>
          <div class="content">Hey!</div>
          <div class="content">Hey!</div>
          <div class="content">Hey!</div>
        </div>
      </body>
    </html>

Now they don't flex anymore, between 150px - 250px width. – Asons Nov 18 '17 at 18:38 — Asons, Nov 18 '17 at 18:38

CSS: Flex is resizing div on next row

3 Answers3