Flex свойство override max-width

Question

Я пытаюсь создать контейнер div div, в котором все divs будут иметь одинаковую ширину (два div на строку, 50% ширины контейнера каждый из них).

Я установил div внутри контейнера с max-width: 50%;, потому что я хочу, чтобы они были равны, но, похоже, это не соответствует этому max-width, когда в этой строке есть только один элемент.

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, в котором вы можете увидеть, как ширина третьего элемента больше, чем другие.

Почему flex divs внутри контейнера не соблюдаются max-width property?

Заранее благодарен!

Answer 1

вы можете сбросить или переключить модель коробки включить padding в width расчета:

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/