等高柔性行不起作用

我想在我的內容框中有兩行可以說兩個行應平均分割視圖端口的高度（50：50）。我的要求是我希望他們能夠分開身高（40:60），但我是彈性盒子的起始人，所以最初我以50:50的速度前進。等高柔性行不起作用

第一行將有一個應跨越整個寬度和高度的img標記。但是，該圖像上也有最大寬度和高度。第二排將有3個列表項，左縮略圖

這裏是codepen：http://codepen.io/spanhawk/pen/Ggjwye

HTML代碼

<html ng-app="ionicApp"> 
    <head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 

    <title>Split view equally</title> 

    <link href="http://code.ionicframework.com/0.9.27/css/ionic.min.css" rel="stylesheet"> 
    <script src="http://code.ionicframework.com/1.0.0-beta.14/js/ionic.bundle.min.js"></script> 
    </head> 

    <body> 
    <ion-nav-bar animation="nav-title-slide-ios7" 
       type="bar-positive" 
       back-button-type="button-icon" 
       back-button-icon="ion-arrow-left-c"></ion-nav-bar> 

    <ion-nav-view animation="slide-left-right"></ion-nav-view> 
    <script id="home.html" type="text/ng-template"> 
     <ion-view title="Home"> 
     <ion-content scroll="false"> 
      <section class="home-container"> 
     <div class="row"> 
     <div class="col col-100"> 
      <img src="http://placehold.it/600x500"> 
     </div> 
     </div> 
     <div class="row"> 
     <div class="col col-100" 
      <ion-list> 
     <ion-item class="item-thumbnail-left"> 
      <img src="http://placehold.it/100x100"> 
      <h1>Header 1</h1> 
      </ion-item> 
      <ion-item class="item-thumbnail-left"> 
      <img src="http://placehold.it/100x100"> 
      <h1>Header 2</h1> 
      </ion-item> 
      <ion-item class="item-thumbnail-left"> 
      <img src="http://placehold.it/100x100"> 
       <h1>Header 3</h1> 
      </ion-item> 
      </ion-list> 
     </div> 
     </div> 
    </section> 
     </ion-content> 
     </ion-view> 
    </script> 
    </body> 
</html>

Eventhough圖像的高度和寬度是廣告600x500我希望它充分寬cantainer和heigth應該是50 50分爲兩排

任何人都可以向我解釋爲什麼它不工作，如何使它工作？

我做的是在教程

http://css-tricks.com/boxes-fill-height-dont-squish1

描述我敲我的牆壁過去6小時頭，試圖弄清楚爲什麼它不工作的一切。關於CSS和HTML 一個不好的是，沒有例外，錯誤等回覆爲鏈接主題

來源

2014-12-29 Syed

只要給您的容器一定的高度

.home-container { 
    display: flex; 
    flex-direction: column; 
    height: 100%; 
}

codepen

來源

2014-12-29 14:32:40 vals

等高柔性行不起作用

回答

相關問題