Мой Flexbox имеет странное необязательное заполнение

#css #twitter-bootstrap-3 #flexbox #frontend #padding

#css #twitter-bootstrap-3 #flexbox #интерфейс #заполнение

Вопрос:

Я работаю над простым инструментом, который отображает статистику. Мы хотим отобразить 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 является прототипом с цветом заполнителя, я обещаю, что результат будет иметь более красивые цвета :).
Странное заполнение, вероятно, вызвано заголовком поля, но я не знаю, как это исправить.
Удаление заголовка и редактирование CSS .greybox для устранения проблемы
Нам нужно сохранить заголовок в конечном результате.

Спасибо, что помогли мне, у меня нет идей!

(Извините, английский не мой родной язык)

1. Страница codePen не найдена!

2. Как они будут выглядеть? Любой эскиз или изображение или codepen?

3. нарушена полная ссылка на скрипт

4. codepen.io/joe_desmeules/pen/LRBKEp

5. Извините, кажется, что ручка кода была сломана. Я просто вставил новую ссылку

Ответ №1:

Я обновил ваш css (scss), в нем нет никаких отступов или пробелов, на которые вы указывали в вашем изображении, см. 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;
  }
}