Bootstrap 3 row flex

row-flex.html

<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's maximum height, even if i add "flex-grow" class to the section or the modcon-container.</p>
      </div>
    </section>
  </div>
</div>

style.css

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