私のFlexboxには奇妙な詰め物はありません

Question

私は統計情報を表示する簡単なツールを開発中です。 同じ高さのすべての同じ高さの2つのパネルを、同じ高さの幅の小さいボックスで表示したいとします。

私の結果は私たちが作りたいものに非常に近いですが、ボックスには奇妙なパディングがあります。

<div class="col-md-6 greybox"> 
    <div class="row"> 
    <div class="col-md-12"> 
     <div class="col-md-12"> 
     <h2>Title of the box</h2> 
     </div> 
    </div> 
    </div> 
    <div class="col-md-12 flex"> 
    <div class="row flex"> 
     <div class="col-md-6"> 
     <div class="statbox"> 
      <div class="absolute-center"> 
      <h3>Revelant</h3> 
      <p>lorem</p> 
      </div> 
     </div> 
     </div> 
     <div class="col-md-6"> 
     <div class="statbox"> 
      <div class="absolute-center"> 
      <h3>Revelant data</h3> 
      <p>Lorem ipsum</p> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

• フルスクリプトは、私たちは、ブートストラップ3.7を使用しているhttp://codepen.io/joe_desmeules/pen/LRBKEp
• でavaillableです。
• 私たちはScssを使用しています。
• 私は問題を解決するためにJqueryを使用しません（Angular2を使用します）。
• データは動的です。問題を解決するために固定高さを使用することはできません。
• 提供されたcodepenは、プレースホルダカラーのプロトタイプです。私は結果がより美しい色を持つことを約束します:)。
• 奇妙なパディングはおそらくボックスのタイトルによって引き起こされますが、それを修正する方法はわかりません。
• タイトルを削除し、.greyboxのCSSを編集してください。
• タイトルを最終結果に残す必要があります。

私を助けてくれてありがとう、アイデアから！

（申し訳ありませんが、英語は私の最初の言語ではありません）

Answer 1

私はあなたのCSS（SCSS）を更新持って、それはuはウル画像を向いた任意のパディングや空白を持っていけない、here

をcodepenを参照してください

h2{ 
     margin: 0; 
    } 

html, 
body { 
    padding: 10px; 
    .greybox { 
    background-color: #c7c7c7; 
    padding-bottom: 20px; 
    margin: 0 10px 300px; 
    border-radius: 10px; 
    } 
    .statbox { 
    background-color: #f1f1f1; 
    padding: 10px; 
    border-radius: 10px; 
    height: 100%; 
    width: 100%; 
    text-align: center; 
    display: table; 
    bottom: 0px; 
    h3 { 
     font-weight: bold; 
     color: #1155cc; 
     margin: 0; 
    } 

    } 
    .flex { 
    display: flex; 
    //flex-direction: row; 
    //justify-content: space-around; 
    height: 100%; 
    width: 100%; 
    margin: 0; 
    } 
    .absolute-center { 
    display: table-cell; 
    vertical-align: top; 
    text-align: center; 
    height: 100%; 
    padding: 0; 
    margin: 0; 
    } 
}