水平滾動容器內的 flexbox 寬度

Question

我正在嘗試為虛擬表創建布局。 一個虛擬表將被放置在.table-body元素中。 每個表格單元格與.table-header中的單元格具有相同的 flex 布局樣式，因此具有相同的父元素，它們看起來相同。 問題是.table-cell元素不會拉伸.table-header寬度，而.table-header元素不會拉伸.table-container寬度。

我試圖讓.table-cell給出.table-header和.table-container的寬度。 而.table-body會占用.table-container的剩余空間

這是可以玩的Codesandbox 。

 .table-wrapper { width: 500px; height: 300px; overflow-x: scroll; background: rgba(255, 255, 0, 0.2); } .table-container { display: flex; flex-flow: column nowrap; width: 100%; height: 100%; /* If you uncomment next line, you see what I'm trying to achieve */ /* min-width: 1100px; */ background: rgba(0, 255, 0, 0.3); } .table-header { display: flex; flex-flow: row nowrap; width: 100%; flex: 0 0 auto; background: rgba(255, 100, 0, 0.3); } .table-cell { min-width: 100px; display: flex; flex: 1 1 auto; height: 30px; line-height: 30px; border: 1px solid blue; } .table-body { display: flex; flex: 1 1 auto; border: 1px solid red; background: rgba(255, 0, 0, 0.3); }

 <div class="table-wrapper"> <div class="table-container"> <div class="table-header"> <div class="table-cell" style="flex: 0 0 180px;">header-cell 1</div> <div class="table-cell">header-cell 2</div> <div class="table-cell">header-cell 3</div> <div class="table-cell">header-cell 4</div> <div class="table-cell" style="flex: 0 0 200px;">header-cell 5</div> <div class="table-cell">header-cell 6</div> <div class="table-cell">header-cell 7</div> </div> <div class="table-body">virtual table here</div> </div> </div>

Answer 1

考慮使用inline-flex而不是flex並使用width而不是flex-basis定義寬度

 .table-wrapper { width: 500px; height: 300px; overflow-x: scroll; background: rgba(255, 255, 0, 0.2); } .table-container { display: inline-flex; /* UPDATED */ flex-flow: column nowrap; min-width: 100%; /* UPDATED */ height: 100%; background: rgba(0, 255, 0, 0.3); } .table-header { display: flex; flex-flow: row nowrap; width: 100%; flex: 0 0 auto; background: rgba(255, 100, 0, 0.3); } .table-cell { min-width: 100px; display: flex; flex: 1 1 auto; height: 30px; line-height: 30px; border: 1px solid blue; } .table-body { display: flex; flex: 1 1 auto; border: 1px solid red; background: rgba(255, 0, 0, 0.3); }

 <div class="table-wrapper"> <div class="table-container"> <div class="table-header"> <div class="table-cell" style="flex: 0 0 180px;width:180px;">header-cell 1</div> <div class="table-cell">header-cell 2</div> <div class="table-cell">header-cell 3</div> <div class="table-cell">header-cell 4</div> <div class="table-cell" style="flex: 0 0 200px;width:200px;">header-cell 5</div> <div class="table-cell">header-cell 6</div> <div class="table-cell">header-cell 7</div> </div> <div class="table-body">virtual table here</div> </div> </div>

Answer 2

這是我找到的解決方法，使用width: min-content; 對於表頭和表容器。
這僅在您擺脫table-cell中的內聯樣式時才有效。

 .table-wrapper { width: 500px; height: 300px; overflow-x: scroll; background: rgba(255, 255, 0, 0.2); } .table-container { display: flex; flex-flow: column nowrap; width: min-content; height: 100%; /* If you uncomment next line, you see what I'm trying to achieve */ /* min-width: 1100px; */ background: rgba(0, 255, 0, 0.3); } .table-header { display: flex; flex-flow: row nowrap; width: min-content; flex: 0 0 auto; background: rgba(255, 100, 0, 0.3); } .table-cell { min-width: 100px; display: flex; flex: 1 1 auto; height: 30px; line-height: 30px; border: 1px solid blue; } .table-body { display: flex; flex: 1 1 auto; border: 1px solid red; background: rgba(255, 0, 0, 0.3); }

 <div class="table-wrapper"> <div class="table-container"> <div class="table-header"> <div class="table-cell">header-cell 1</div> <div class="table-cell">header-cell 2</div> <div class="table-cell">header-cell 3</div> <div class="table-cell">header-cell 4</div> <div class="table-cell" >header-cell 5</div> <div class="table-cell">header-cell 6</div> <div class="table-cell">header-cell 7</div> </div> <div class="table-body">virtual table here</div> </div> </div>