Css 弹性柱不会拉伸以填充柱

flex的新功能。不知道为什么右边的两个div不会占据所有的高度空间

我想在这里得到的是在左边有一个大的列，而右边的列将被两行分开

css:

html

---

实际的代码笔代码是

您的代码中缺少的是您需要将

卡

类声明为

flex

容器

像这样：

 .card {
  position:relative;
  margin:8% auto auto auto;
  width:450px;
  height: 100px;
  display: flex;
  display: -webkit-flex;
  background-color:#fff;
} 

更新：

---

看来你的想法是正确的。您的错误只是

正确的磁贴

没有

，那么您的代码肯定会工作。干杯

嗨，杰瑞德，谢谢你的回答。我确实将flex类添加到了卡片容器中。现在左瓷砖和右瓷砖填充了行方向。我在列方向将right tile设置为flex容器，但它的两个子div无法填充剩余的高度，即使right tile的高度与left tile的高度相同

.container
  .card
    .left-tile
      .card-content
        .quote-content
          ....
    .right-tile
      .up-right-tile
        .twitter-button
          ....
      .low-right-tile
        .new-quote
          ....

 .card {
  position:relative;
  margin:8% auto auto auto;
  width:450px;
  height: 100px;
  display: flex;
  display: -webkit-flex;
  background-color:#fff;
}