我的 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>

• 完整的脚本可在http://codepen.io/joe_desmeules/pen/LRBKEp 获得
• 我们使用的是 Bootstrap 3.7。
• 我们正在使用 Scss。
• 我对使用 Jquery 解决问题不感兴趣（我们使用 Angular2）
• 数据将是动态的。我无法使用固定高度来解决此问题。
• 提供的 codepen 是一个原型，带有占位符颜色，我保证结果会有更漂亮的颜色:)。
• 奇怪的填充可能是由框的标题引起的，但我不知道如何修复它。
• 删除标题，并编辑.greybox的CSS修复问题
• 我们需要在最终结果中保留标题。

谢谢你的帮助，我没办法了！

（对不起，英语不是我的第一语言）

Answer 1

我已经更新了你的 css(scss)，它没有你在图像中指向的任何填充或空白，请参阅 codepen here

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;
  }
}