Bootstrap + Flexbox dynamic height

问题

I've added this css for flex-box in bootstrap to my site: http://www.bootply.com/126437

the problem is as follows: it works for both <sections> in my row-flex row-flex-wrap container (the sections have same height) but the content within the 2nd section doesn't stretch to it's maximum parent height.

<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's 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:

If you want your yellow div to grow with flex make sure its parent is actually a flex-box with flex-direction: column.

Add the flex-col class to your <section class="col-md-8"> than you can use flex.

Demo

回答2:

Here is the code you should be using below. It looks like a lot, but flexbox is relatively new to the game and you need vendor prefixes.

Bootply Example Modified

        /* 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="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" 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's maximum height, even if i add "flex-grow" class to the section or the modcon-container.</p>
      </div>
    </section>
  </div>
</div>

If you want a more complete example using all the bootstrap elements check out this example.

来源：https://stackoverflow.com/questions/34061717/bootstrap-flexbox-dynamic-height