Flex item override max-width property

Question

I am trying to make a flex container of divs in which all the divs will have the same width (two divs per line, 50% width of the container each of them).

I have set the divs inside the container with max-width: 50%; because I want them to be equals but it does not seem to respect this max-width when there is only one item in this line.

HTML:

<div id="container">
  <div id="left" class="block">Left</div>
  <div id="center" class="block">
    <div class="flexContainer">
      <div class="flexDiv"></div>
    </div>
    <div class="flexContainer">
      <div class="flexDiv"></div>
    </div>
    <div class="flexContainer">
      <div class="flexDiv"></div>
    </div>
  </div>
  <div id="right" class="block">Right</div>
</div>

CSS:

html, body{
    width: 100%;
    height: 100%;
}

#container{
    display: flex;
    height: 100%;
    background-color: blue;
}

.block{
    flex: 1;
}

#left{
    background-color: green;
}

#center{
    display: flex;
    flex: 1;
    flex-wrap: wrap;  
    align-content: flex-start;
}

#right{
    background-color: orange;
}

.flexContainer{
    flex: 1;
    min-width: 100px;
    max-width: 50%;
    height: 150px;
    background-color: red;
    padding: 10px;
}

.flexDiv{
    width: 100%;
    height: 100%;
    background-color: yellow;
}

JSFiddle in which you can see how the width of the third element is bigger than the others.

Why the flex divs inside the container are not respecting max-width property?

Thanks in advance!

@Paulie_D Yes, exactly this. If you provide it with an explanation on an answer I will mark it as accepted :) — Francisco Romero, May 08 '16 at 19:31
No problem...basically it was a `box-sizing` issue. @GCyrillus has already provided the answer. — Paulie_D, May 08 '16 at 19:44
@Paulie_D Thank you for the property! I did not know about this property before, so I am happy to learn a bit more each day :) — Francisco Romero, May 08 '16 at 20:00
@Paulie_D I notice now that you have set `flex: 1 0 auto` on your jsfiddle. I know that the third parameter is `flex-basis` parameter but I do not know why you set it to auto. Can you explain it please? — Francisco Romero, May 08 '16 at 20:17
For the avoidance of doubt. Older browsers used `flex-basis: 0` as the default — Paulie_D, May 08 '16 at 20:19
@Error404, here's some more info on `flex-basis: auto`. http://stackoverflow.com/q/34352140/3597276 — Michael Benjamin, May 09 '16 at 01:37

score 2 · Accepted Answer · edited Jun 20 '20 at 09:12

you can reset or switch box model to include padding within width calculation:

https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

https://www.w3.org/TR/css-ui-3/#box-sizing

.flexContainer{
    flex: 1;
    min-width: 100px;
    max-width: 50%;
    height: 150px;
    background-color: red;
    padding: 10px;
    box-sizing:border-box;/* includes borders & padding within width calculation
}

https://jsfiddle.net/b5h9rjcd/1/

Flex item override max-width property

1 Answers1