フレックスボックスレイアウトのフレックスアイテムの高さを制限する

このjsfiddleのようなフレックスボックスレイアウトを作成しようとしています。フレックスボックスレイアウトのフレックスアイテムの高さを制限する

<div class="container"> 
    <div class="header"> 
    header 
    </div> 
    <div class="content"> 
    </div> 
    <div class="footer"> 
    footer 
    </div> 
</div>

これは、CSSです：これはHTMLです

.container { 
    background-color: green; 
    height: 300px; 
    max-height: 300px; 
    display: flex; 
    flex-direction: column; 
} 

.header { 
    background-color: yellow; 
    flex: 0 0 50px; 
} 

.content { 
    background-color: blue; 
    flex: 0 0 90%; 
    overflow: scroll; 
} 

.footer { 
    background-color: red; 
    flex: 0 0 40px; 
}

そして、それは動作しますが、私はまた、固定「.container」要素を超えていないレイアウト全体のサイズを制限します高さ。

どうすればこの問題を解決できますか？

おかげで、ジェラルド

出典

2016-05-21 nutrina

私はあなたが疑問明確ではありませんよ。 – WorkWe

を動作するかどうかを確認しますそれにflex: 1;プロパティを追加します。

実施例：

var i; 
 
for (i = 0; i < 100; i++) { 
 
    $(".content").append("<div>hello " + i + "</div>"); 
 
}

.container { 
 
    background-color: green; 
 
    height: 300px; 
 
    max-height: 300px; 
 
    display: flex; 
 
    flex-direction: column; 
 
    border:3px solid black; 
 
} 
 

 
.header { 
 
    background-color: yellow; 
 
    flex: 0 0 50px; 
 
} 
 

 
.content { 
 
    background-color: blue; 
 
    flex: 1; 
 
    overflow: scroll; 
 
} 
 

 
.footer { 
 
    background-color: red; 
 
    flex: 0 0 40px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="header"> 
 
    header 
 
    </div> 
 
    <div class="content"> 
 
    </div> 
 
    <div class="footer"> 
 
    footer 
 
    </div> 
 
</div>

jsFiddle：https://jsfiddle.net/azizn/0aumg6b0/

出典

2016-05-22 08:14:48 Aziz

はあなただけ.contentをすることにより、容器内に全体の許可のスペースを埋めるようにする必要があり、この1とスタイルシートで古いコンテナコードを交換し、それが

<style> 
     .container { 
      background-color: green; 
      height: 300px; 
      max-height: 300px; 
      display: flex; 
      flex-direction: column; 
      overflow: auto; 
     } 

     .header { 
      background-color: yellow; 
      flex: 1; 
      overflow: scroll; 
      height: 100px; 
     } 

     .content { 
      background-color: blue; 
      flex: 7; 
      overflow: scroll; 
     } 

     .footer { 
      background-color: red; 
      flex:1; 
     } 

    </style> 

</head> 

<body> 

    <div class="container"> 
     <div class="header"> 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate, quae beatae esse, impedit est distinctio ducimus dignissimos suscipit similique quos labore libero ab molestiae, velit eveniet, quo. Odit, architecto, totam! 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit nisi temporibus, rem fugiat dolorum aliquid aspernatur quibusdam quam aut nihil et dignissimos animi minima laboriosam ipsum culpa quisquam repellat eum! 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate, quae beatae esse, impedit est distinctio ducimus dignissimos suscipit similique quos labore libero ab molestiae, velit eveniet, quo. Odit, architecto, totam! 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit nisi temporibus, rem fugiat dolorum aliquid aspernatur quibusdam quam aut nihil et dignissimos animi minima laboriosam ipsum culpa quisquam repellat eum! 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate, quae beatae esse, impedit est distinctio ducimus dignissimos suscipit similique quos labore libero ab molestiae, velit eveniet, quo. Odit, architecto, totam! 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit nisi temporibus, rem fugiat dolorum aliquid aspernatur quibusdam quam aut nihil et dignissimos animi minima laboriosam ipsum culpa quisquam repellat eum! 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate, quae beatae esse, impedit est distinctio ducimus dignissimos suscipit similique quos labore libero ab molestiae, velit eveniet, quo. Odit, architecto, totam! 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit nisi temporibus, rem fugiat dolorum aliquid aspernatur quibusdam quam aut nihil et dignissimos animi minima laboriosam ipsum culpa quisquam repellat eum! 
     </div> 
     <div class="content"> 
     </div> 
     <div class="footer"> 
      footer 
     </div> 
    </div>

出典

2016-05-21 05:41:13

オーバーフロー：オートは私を助けません。レイアウト全体をスクロール可能にするだけです。そして、コンテンツをスクロール可能にし、全体の高さを.containerに制限したいとします。 – nutrina

編集された答えを確認してください。

スクロールを表示するためのダミーテキストを追加しました。おそらく、スクロールするのに不十分なテキストでした。 –

フレックスボックスレイアウトのフレックスアイテムの高さを制限する

答えて

関連する問題