Flexbox Mit einem Raster auf einem DIV-Element erstellen

Question

hier ist die JS Geige meines Codes: https://jsfiddle.net/o7nj1mj9/

HTML:

<div id="div2"> 
     <div class = "flex-table"> 1</div> 
     <div class = "flex-table"> 2</div> 
     <div class = "flex-table"> 3</div> 
     <div class = "flex-table"> 4</div> 

CSS:

.container { 
display: flex; 
position: relative; 
max-width: 1600px; 
padding: 15px; 
height: 275px; 
overflow: visible; 
background-color: #84B6C0; 
box-shadow: 0px 10px 5px #888888; 
font-family: 'Open Sans'; 

#div2 { 
padding: 0; 
margin: 0; 
list-style: none; 
display: -webkit-box; 
display: -moz-box; 
display: -ms-flexbox; 
display: -webkit-flex; 
display: flex; 
-webkit-flex-flow: row; 
justify-content: space-around; 
height: 50px; 
line-height:30px; 
} 

.flex-table { 
background: tomato; 
margin: 5px; 
color: white; 
font-weight: bold; 
font-size: 1.5em; 
text-align: center; 
height: auto; 
flex-grow: 1; 
min-width: 25%; 
} 

Ich versuche, Erstellen eines Gitters von 4 Quadraten über dem DIV-Element "Portfolio". Wie Sie sehen können, habe ich 4 Quadrate, aber sie füllen nicht den gesamten Raum des DIV.

Entschuldigung, wenn der Code chaotisch ist.

Answer 1

In #div2 {, entfernen height:50px und width: 100%

https://jsfiddle.net/o7nj1mj9/1/