Styling HTML elements to fill 100% of parent width regarding min-width

Question

I want html elements to have width between 150px and 200px where they fill the 100% of parent width.

Image 1:

Image 2 (after resizing window):

Image 3: (resizing a bit more):

Image 4: (even more):

I have tried flexbox but items are not filling the 100% of width:

(please check the sinppet in full screen)

.flex {
  display: -webkit-flex;
  display: flex;
  flex-wrap: wrap;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  background: #ff0000;
}
.flexitem {
  display: -webkit-flex;
  display: flex;
  margin: 5px;
  min-width: 150px;
  max-width: 200px;
  background: #000000;
  border: 1px solid #ffffff;
}

<div class="flex">
  <div class="flexitem">&nbsp;</div>
  <div class="flexitem">&nbsp;</div>
  <div class="flexitem">&nbsp;</div>
  <div class="flexitem">&nbsp;</div>
  <div class="flexitem">&nbsp;</div>
  <div class="flexitem">&nbsp;</div>
  <div class="flexitem">&nbsp;</div>
  <div class="flexitem">&nbsp;</div>
  <div class="flexitem">&nbsp;</div>
  <div class="flexitem">&nbsp;</div>
  <div class="flexitem">&nbsp;</div>

</div>

Answer 1

The most important change is to allow flex-grow and flex-shrink in combination with the min- and max-width. Now they are all between 150 and 200px wide. The last line doesn't fill the parent, which is not possible with these widths. Apart from that, i erased display:flex on the child elements - since they don't have children, this is of no use. I also added box-sizing: border-box; to have the border included in your maximum of 200px:

.flex {
  display: flex;
  flex-wrap:wrap;
  justify-content: space-between;
  background:#ff0000;
}

.flexitem {
  flex-grow: 1;
  flex-shrink: 1;
  box-sizing: border-box;
  margin: 5px;
  min-width:150px;
  max-width:200px;
  background:#000000;
  border:1px solid #ffffff;   
}

<div class="flex">
  <div class="flexitem">&nbsp;</div>
  <div class="flexitem">&nbsp;</div>
  <div class="flexitem">&nbsp;</div>
  <div class="flexitem">&nbsp;</div>
  <div class="flexitem">&nbsp;</div>
  <div class="flexitem">&nbsp;</div>
  <div class="flexitem">&nbsp;</div>
  <div class="flexitem">&nbsp;</div>
  <div class="flexitem">&nbsp;</div>
  <div class="flexitem">&nbsp;</div>
  <div class="flexitem">&nbsp;</div>
  
</div>

Answer 2

All you need to add to your code is flex: 1 1 150px and all flexitems will be between 150px and 200px.

Note that it is obviously not possible to fill the last row to 100% parent width while wrapping if each flexitem is between 150px and 200px.

Why this works:

1. The flex-shorthand flex: 1 1 150px means:

   a. flex-grow is allowed by setting it to 1

   b. flex-shrink is allowed by setting it to 1

   c. flex-basis is set to the min-width that is required

2. The flex setting along with min-width and max-width make the flexitems go between 150px and 200px.

   A word of caution though: In rare cases there is some inconsistent behavior especially when using min and max values along with flex- see this for example.

3. Also added in border-box (explanation here) and removed the body margin to finish it up.

Thanks!

body{
  margin: 0;
}
*{
  box-sizing: border-box;
}

.flex {
  display: -webkit-flex;
  display: flex;
  flex-wrap: wrap;
  -webkit-flex-direction: row;
  flex-direction: row;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  background: #ff0000;
}
.flexitem {
  display: -webkit-flex;
  display: flex;
  margin: 5px;
  flex: 1 1 150px;
  min-width: 150px;
  max-width: 200px;
  background: #000000;
  border: 1px solid #ffffff;
}

<div class="flex">
  <div class="flexitem">&nbsp;</div>
  <div class="flexitem">&nbsp;</div>
  <div class="flexitem">&nbsp;</div>
  <div class="flexitem">&nbsp;</div>
  <div class="flexitem">&nbsp;</div>
  <div class="flexitem">&nbsp;</div>
  <div class="flexitem">&nbsp;</div>
  <div class="flexitem">&nbsp;</div>
  <div class="flexitem">&nbsp;</div>
  <div class="flexitem">&nbsp;</div>
  <div class="flexitem">&nbsp;</div>
</div>