Я добавил этот 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
Если вы хотите, чтобы ваш желтый div увеличивался с помощью flex, убедитесь, что его родительский элемент - это гибкая коробка с flex-direction: column.
Добавьте класс flex-col в <section class="col-md-8">, чем вы можете использовать flex.
Вот код, который вы должны использовать ниже. Это похоже на много, но 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>