Bootstrap + Flexbox динамическая высота

Я добавил этот css для flex-box в bootstrap на мой сайт: http://www.bootply.com/126437

проблема заключается в следующем: она работает для обоих <sections> в моем контейнере row-flex row-flex-wrap (разделы имеют одинаковую высоту), но содержимое во втором разделе не растягивает максимальную родительскую высоту.

<div class="row row-flex row-flex-wrap">
 <section class="col-md-8">
  ... some content
 </section>
 <section class="col-md-4">
  <h1>Welcome</h1>
  <div class="modcon green">
   ... some more content with green background but the background doesn't stretch to it maximum height, even if i add "flex-grow" class to the section or the modcon-container.
  </div>
 </section>
</div>

http://www.bootply.com/lbDqiEzhGD

Ответ 1

Если вы хотите, чтобы ваш желтый div увеличивался с помощью flex, убедитесь, что его родительский элемент - это гибкая коробка с flex-direction: column.

Добавьте класс flex-col в <section class="col-md-8">, чем вы можете использовать flex.

Демо

Ответ 2

Вот код, который вы должны использовать ниже. Это похоже на много, но flexbox относительно новичок в игре, и вам нужны префиксы поставщиков.

Исходный пример загрузки

        /* flexbox styles */
    .flex-row.row {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
    }
    .flex-row.row > [class*='col-'] {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -webkit-flex-direction: column;
      -ms-flex-direction: column;
      flex-direction: column;
    }
    /* mobile fallback when col-xs-* is not specified */
    @media only screen and (max-width : 768px) {
        .flex-row.row > [class*="col-sm-"]:not([class*="col-xs-"]) {
	        width: 100%;
        }
    }
    /* inner flex */
    .flex-row .flex-grow {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-flex: 1;
      -webkit-flex: 1 0 auto;
      -ms-flex: 1 0 auto;
      flex: 1 0 auto;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -webkit-flex-direction: column;
      -ms-flex-direction: column;
      flex-direction: column;
    }

    /* optional to center paragraphs - add flex-justify to flex-grow class */
    .flex-grow.flex-justify {
       justify-content: center;
    }

    /* demo styles */
    h1 {
      font-size: 30px;
    }
    .modcon-yellow {
      background-color: yellow;
    }
    .modcon-green {
      background-color: green;
    }

<!-- Bootstrap 3.3.6 -->
<link href="#" onclick="location.href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'; return false;" rel="stylesheet" />

<div class="container">
  <div class="row flex-row">
    <section class="col-xs-8">
      <h2>News</h2>
      <div class="modcon-yellow flex-grow">
        <p>... some content but yellow background doesn't stretch.</p>
      </div>
    </section>
    <section class="col-xs-4">
      <h1>Welcome</h1>
      <div class="modcon-green">
        <p>... some more content with green background but the background (yellow) doesn't stretch to it maximum height, even if i add "flex-grow" class to the section or the modcon-container.</p>
      </div>
    </section>
  </div>
</div>