Flexbox等高

Question

我需要一些flexbox帮助。

我试图让包含第2项和第3项的列在height中与第1列相同。

如果第2项和第3项都拉伸以填充可用空间，我更愿意。我已经尝试了所有的事情，但没有看上去似乎有效。

这是我的HTML代码

<div class="container ">
  <div class="row yellow">
  <div class="col-sm-6 pink">
    <h1>Item 1</h1>
    ...
  </div>
  <div class="col-sm-6">
   <div class="row">
     <div class="col-sm-12 cyan">
        <h1>Item 2</h1>
        ...
     </div>
       <div class="col-sm-12 green">
         <h1>Item 3</h1>
          ...
        </div>
      </div>
    </div>
  </div>
</div>

我正在使用Bootstrap 3和flexbox Grid，它将Bootstrap 3扩展为具有flexbox属性。

CodePen Link

Flexbox Grid

Answer 1

不使用框架flexboxgrid，只需简单的flexbox

body,
html {
  height: 100%
}
.yellow {
  background: yellow
}
.pink {
  background: pink
}
.cyan {
  background: cyan
}
.green {
  background: green
}
.container {
  display: flex;
  flex-flow: column wrap;
  height: 100%
}
.row,
.col-xs-6 {
  height: 100%
}
.col-xs-12 {
  height: 50%
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container ">
  <div class="row yellow">
    <div class="col-xs-6 pink">
      <h1>Item 1</h1>
      ...
    </div>
    <div class="col-xs-6">
      <div class="row">
        <div class="col-xs-12 cyan">
          <h1>Item 2</h1>
          ...
        </div>
        <div class="col-xs-12 green">
          <h1>Item 3</h1>
          ...
        </div>
      </div>
    </div>
  </div>
</div>

Answer 2

不应该太困难，没有flexbox网格，也不需要更改HTML标记。

.row {
  display: flex;
}

.col-sm-6 .row {
  flex-direction: column;
  height: 100%;
  .col-sm-12 {flex: 1;}
}

https://codepen.io/anon/pen/pbojjQ