等高的彈性排不起作用

Question

我正在嘗試在內容框中包含兩行。可以說，這兩行應將視口的高度平均分割（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>

即使圖像的高度和寬度為600x500，我也希望其占據容器的全部寬度，並且高度應為50 50分成兩行

誰能向我解釋為什么它不起作用以及如何使它起作用？

我正在做教程中描述的所有事情

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

我過去6個小時都在牆上砸頭，試圖弄清為什么它不起作用。 關於CSS和HTML的一件壞事是，沒有異常，錯誤等。

Answer 1

只要給你的容器一個確定的高度

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

codepen

等高的彈性排不起作用

問題描述

1 個解決方案

解決方案1
1 已采納 2014-12-29 14:32:40

等高的彈性排不起作用

問題描述

1 個解決方案

解決方案1 1 已采納 2014-12-29 14:32:40

解決方案1
1 已采納 2014-12-29 14:32:40