在Flexbox佈局中限制Flex項目高度

我正在嘗試創建如此jsfiddle中所示的Flexbox佈局。這是HTML：在Flexbox佈局中限制Flex項目高度

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

這是CSS：

.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

你只需要做出.content由填充容器內的整個允許的空間將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

替換這一個樣式表中的舊集裝箱代碼，看看它是否工作

<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

溢出：auto不會幫助我，它只會使整個佈局滾動...而我只想讓內容滾動，同時將總高度限制爲.container。 – nutrina

檢查編輯答案..我添加了一些虛擬文本顯示

滾動..問題可能是文本不足以讓滾動去..lemme知道如果這是你所需要的.. –

在Flexbox佈局中限制Flex項目高度

回答

相關問題