フレックスカラムは、カラムを充填するために伸びません。

Question

フレックス。なぜ右の2つのdivがすべての高さのスペースを占めないのだろうかと思っています。

.card { 
    display: -webkit-flex; 
    display: flex; 
    margin:8% auto auto auto; 
    width:450px; 
    height: 150px; 
    min-height: 100px; 
    color: black; 
} 

.left-tile { 
    flex: 3; 
    background: #02A0E5; 
} 

right-tile { 
    flex: 2 1 50%; 
    background: #FD6800; 
    display: -webkit-flex; 
    display: flex; 
    flex-direction: column; 
} 

.up-right-tile { 
background: #D03324; 
flex: 2; 
} 

.low-right-tile { 
    background: #FD6800; 
    flex: 2; 
} 

HTML

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

：右の列は2行

CSSによって分割されますしながら、私はここで取得しようとしています何

は、左の大きな柱を持つことです

実際のコードペンコードはhere

Answer 1

あなたが欠けているものcodepenのcardクラスをflexコンテナとして宣言する必要があるということです。

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

更新：

あなたの考え方が正しいと思われ、このよう

。あなたのエラーはright-tileには.がないので、あなたのコードは間違いなく動作するはずです。乾杯！