問題
邊框底部停止滾動開始的位置。如何解決這個問題？我嘗試在這些 div 上設定 100% 的寬度，但這似乎沒有幫助。
見小提琴 https://jsfiddle.net/exrb8oma/
CSS
.gant-container {
display: grid;
grid-template-areas:
"left right";
grid-template-columns: max(min(20%,400px), 300px);
}
.left-panel {
grid-area: left;
background: grey;
}
.right-panel {
grid-area: right;
background: lightgray;
overflow-x: scroll;
}
.right-panel-header {
border-bottom: 1px solid #000;
}
.right-panel-body {
display: flex;
flex-direction: column;
}
.gant-row {
display: flex;
flex-direction: row;
border-bottom: 1px solid #eee;
height: 30px;
}
.gant-item {
border-right: 1px solid #eee;
min-width: 50px;
height: 100%;
}
.weekend {
background-color: orangered;
}
HTML
<link rel="stylesheet" type="text/css" href="style.css">
<div class="gant-container">
<div class="left-panel">
Left panel...
</div>
<div class="right-panel">
<div class="right-panel-header">
Header
</div>
<div class="right-panel-body">
<div class="gant-row">
<div class="gant-item"></div>
<div class="gant-item"></div>
<div class="gant-item"></div>
<div class="gant-item"></div>
<div class="gant-item"></div>
<div class="gant-item weekend"></div>
<div class="gant-item weekend"></div>
<div class="gant-item"></div>
<div class="gant-item"></div>
<div class="gant-item"></div>
<div class="gant-item"></div>
<div class="gant-item"></div>
<div class="gant-item weekend"></div>
<div class="gant-item weekend"></div>
</div>
<div class="gant-row">
<div class="gant-item"></div>
<div class="gant-item"></div>
<div class="gant-item"></div>
<div class="gant-item"></div>
<div class="gant-item"></div>
<div class="gant-item weekend"></div>
<div class="gant-item weekend"></div>
<div class="gant-item"></div>
<div class="gant-item"></div>
<div class="gant-item"></div>
<div class="gant-item"></div>
<div class="gant-item"></div>
<div class="gant-item weekend"></div>
<div class="gant-item weekend"></div>
</div>
<div class="gant-row">
<div class="gant-item"></div>
<div class="gant-item"></div>
<div class="gant-item"></div>
<div class="gant-item"></div>
<div class="gant-item"></div>
<div class="gant-item weekend"></div>
<div class="gant-item weekend"></div>
<div class="gant-item"></div>
<div class="gant-item"></div>
<div class="gant-item"></div>
<div class="gant-item"></div>
<div class="gant-item"></div>
<div class="gant-item weekend"></div>
<div class="gant-item weekend"></div>
</div>
</div>
</div>
</div>
uj5u.com熱心網友回復：
添加display: grid;到.right-panel
.gant-container {
display: grid;
grid-template-areas:
"left right";
grid-template-columns: max(min(20%,400px), 300px);
}
.left-panel {
grid-area: left;
background: grey;
}
.right-panel {
grid-area: right;
background: lightgray;
overflow-x: scroll;
display: grid;
}
.right-panel-header {
border-bottom: 1px solid #000;
}
.right-panel-body {
display: flex;
flex-direction: column;
}
.gant-row {
display: flex;
flex-direction: row;
border-bottom: 1px solid #eee;
height: 30px;
}
.gant-item {
border-right: 1px solid #eee;
min-width: 50px;
height: 100%;
}
.weekend {
background-color: orangered;
}<div class="gant-container">
<div class="left-panel">
Left panel...
</div>
<div class="right-panel">
<div class="right-panel-header">
Header
</div>
<div class="right-panel-body">
<div class="gant-row">
<div class="gant-item"></div>
<div class="gant-item"></div>
<div class="gant-item"></div>
<div class="gant-item"></div>
<div class="gant-item"></div>
<div class="gant-item weekend"></div>
<div class="gant-item weekend"></div>
<div class="gant-item"></div>
<div class="gant-item"></div>
<div class="gant-item"></div>
<div class="gant-item"></div>
<div class="gant-item"></div>
<div class="gant-item weekend"></div>
<div class="gant-item weekend"></div>
</div>
<div class="gant-row">
<div class="gant-item"></div>
<div class="gant-item"></div>
<div class="gant-item"></div>
<div class="gant-item"></div>
<div class="gant-item"></div>
<div class="gant-item weekend"></div>
<div class="gant-item weekend"></div>
<div class="gant-item"></div>
<div class="gant-item"></div>
<div class="gant-item"></div>
<div class="gant-item"></div>
<div class="gant-item"></div>
<div class="gant-item weekend"></div>
<div class="gant-item weekend"></div>
</div>
<div class="gant-row">
<div class="gant-item"></div>
<div class="gant-item"></div>
<div class="gant-item"></div>
<div class="gant-item"></div>
<div class="gant-item"></div>
<div class="gant-item weekend"></div>
<div class="gant-item weekend"></div>
<div class="gant-item"></div>
<div class="gant-item"></div>
<div class="gant-item"></div>
<div class="gant-item"></div>
<div class="gant-item"></div>
<div class="gant-item weekend"></div>
<div class="gant-item weekend"></div>
</div>
</div>
</div>
</div>uj5u.com熱心網友回復：
每個矩形的類的寬度.gant-item太大，它基本上溢位了你的.gant-row元素，所以邊框.right-panel-header適合你為.right-panel容器定義的 300px，但容器沒有它里面的所有專案那么寬。
也許嘗試使用百分比而不是min-width: 50pxfor each .gant-item。
uj5u.com熱心網友回復：
您需要flex-shrink用于彈性專案。
如果所有 flex 專案的大小都大于 flex 容器，則專案會根據 flex-shrink參考縮小以適應
彈性收縮屬性的一個例子：
.item1{
flex: 1 1 20em (shorthand for flex-grow: 1, flex-shrink: 1,
flex-basis: 20em)
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/413012.html
標籤：
上一篇：其他CSS元素中的CSS元素