使用Flexbox將創建一個DIV元素的頂部網格

Question

這裏是我的代碼的JS小提琴：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%; 
} 

我想在DIV元素頂部創建一個4格的網格，「投資組合」。正如你所看到的，我有4個方塊，但它們並沒有填滿DIV的整個空間。

道歉，如果代碼混亂。

Answer 1

在#div2 {，刪除height:50px並添加width: 100%

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