在裏面使用帶有滾動div的flex容器

這個問題看起來很基本。我有一個側面板。在該側面板中，我希望將兩個單獨的面板堆疊在一起，其中包含3個div。包含的兩個div將具有固定的高度，並且不會超過該固定的高度。第三個div有可變數量的元素，如果它超過列的高度，我希望它可以滾動。兩個頂層面板不應該像現在這樣超過窗戶的高度。在裏面使用帶有滾動div的flex容器

我的問題是讓flex平均分配屏幕高度到兩個頂層面板，並在必要時在列表中有滾動條（＃sistack，＃threads）。

當然，你有一種情況，一個列表比另一個長，在這種情況下，你希望佔用大部分空間的時間更長。到目前爲止，我有以下代碼：

#column { 
 
    float: right; 
 
    width: 250px; 
 
    max-width: 250px; 
 
    height: 100%; 
 
} 
 

 
#debug { 
 
    display: flex; 
 
    height: inherit; 
 
    flex-direction: column; 
 
} 
 

 
#debug>div { 
 
    background-color: #eee; 
 
    border: 1px solid black; 
 
    box-sizing: border-box; 
 
} 
 

 
#sistack div, 
 
#threads div { 
 
    display: block; 
 
    height: 30px; 
 
    width: 100%; 
 
} 
 

 
#sistack, 
 
#threads { 
 
    min-height: 60px; 
 
} 
 

 
.toolbar { 
 
    height: 50px; 
 
    background-color: blue; 
 
    width: 100%; 
 
}

<div id=column> 
 
    <div id=debug> 
 
    <div> 
 
     <span>Hello Sir</span> 
 
     <div class=toolbar></div> 
 
     <div id=sistack> 
 
     <div>Item</div> 
 
     <div>Item</div> 
 
     <div>Item</div> 
 
     <div>Item</div> 
 
     <div>Item</div> 
 
     <div>Item</div> 
 
     <div>Item</div> 
 
     <div>Item</div> 
 
     <div>Item</div> 
 
     <div>Item</div> 
 
     <div>Item</div> 
 
     <div>Item</div> 
 
     <div>Item</div> 
 
     <div>Item</div> 
 
     <div>Item</div> 
 
     <div>Item</div> 
 
     <div>Item</div> 
 
     <div>Item</div> 
 
     <div>Item</div> 
 
     <div>Item</div> 
 
     <div>Item</div> 
 
     <div>Item</div> 
 
     <div>Item</div> 
 
     <div>Item</div> 
 
     <div>Item</div> 
 
     <div>Item</div> 
 
     <div>Item</div> 
 
     <div>Item</div> 
 
     <div>Item</div> 
 
     <div>Item</div> 
 
     <div>Item</div> 
 
     <div>Item</div> 
 
     </div> 
 
    </div> 
 
    <div> 
 
     <span>Threads</span> 
 
     <div class=toolbar></div> 
 
     <div id=threads> 
 
     <div>Item</div> 
 
     <div>Item</div> 
 
     <div>Item</div> 
 
     <div>Item</div> 
 
     <div>Item</div> 
 
     <div>Item</div> 
 
     <div>Item</div> 
 
     <div>Item</div> 
 
     <div>Item</div> 
 
     <div>Item</div> 
 
     <div>Item</div> 
 
     <div>Item</div> 
 
     <div>Item</div> 
 
     <div>Item</div> 
 
     <div>Item</div> 
 
     <div>Item</div> 
 
     <div>Item</div> 
 
     <div>Item</div> 
 
     <div>Item</div> 
 
     <div>Item</div> 
 
     <div>Item</div> 
 
     <div>Item</div> 
 
     <div>Item</div> 
 
     <div>Item</div> 
 
     <div>Item</div> 
 
     <div>Item</div> 
 
     <div>Item</div> 
 
     <div>Item</div> 
 
     <div>Item</div> 
 
     <div>Item</div> 
 
     <div>Item</div> 
 
     <div>Item</div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

我希望我解釋的不夠好，感謝先進的任何幫助:)

來源

2017-03-03 flouc001

我開始認爲這不能純粹用CSS和HTML來完成。 – flouc001

我不知道如果我得到你的點，但爲了有一個滾動div，你需要使用一個修復高度，並添加一個溢出-y或x來滾動。

#sistack,#threads{ 
    height:60px; 
    overflow-y: scroll; 
}

來源

2017-03-03 09:11:25 claudios

但是整個flex的關鍵是你不需要使用固定的高度，物品應該伸展以填充可用空間？ – flouc001

在裏面使用帶有滾動div的flex容器

回答

相關問題