我正在使用 flexbox 制作類似表格的布局。
它有一個主體、行和單元格。
單元格具有以像素為單位的固定寬度。
正文應可水平滾動。
我想實作行與單元格的累積寬度具有相同的寬度。
這是代碼筆。
<div class="grand-parent">
<div class="parent">
<div class="child">Child 1</div>
<div class="child">Child 2</div>
<div class="child">Child 3</div>
</div>
<div>
有沒有辦法只使用 CSS 來做到這一點？
PS 我知道我可以使用 JS 計算寬度并將其設定為父級，或者我可以將背景顏色設定為祖父級以使其看起來更好，但這不是我在這里需要的。
uj5u.com熱心網友回復：
一種方法是不固定子組件的大小，而是flex-grow: 1;讓它們使用所有可用的大小
.child {
flex-grow: 1;
color: white;
background: blue;
border: 1px solid black;
}
遵循此回復的運行片段
.grand-parent {
width: 800px;
overflow: scroll;
}
.parent {
display: flex;
background: red;
padding: 2em 0;
}
.child {
flex-grow:1;
color: white;
background: blue;
border: 1px solid black;
}
::-webkit-scrollbar {
-webkit-appearance: none;
width: 7px;
}
::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: rgba(0, 0, 0, .5);
box-shadow: 0 0 1px rgba(255, 255, 255, .5);
}<div class="grand-parent">
<div class="parent">
<div class="child">Child 1</div>
<div class="child">Child 2</div>
<div class="child">Child 3</div>
</div>
<div>uj5u.com熱心網友回復：
好吧，就像 Jeremy 的回答一樣，您可以將它們設定為占用可用空間
或者
grand-parent您可以將 設定為固定寬度，而不是parent固定寬度；
.parent {
display: flex;
background: red;
padding: 2em 0;
width: 800px;
overflow: auto;
}
我把所有的樣式都grand-parent加到了樣式中parent
以下代碼段作業得很好：
.parent {
display: flex;
background: red;
padding: 2em 0;
width: 800px;
overflow: auto;
}
.child {
flex: 0 0 300px;
color: white;
background: blue;
border: 1px solid black;
}<div class="grand-parent">
<div class="parent">
<div class="child">Child 1</div>
<div class="child">Child 2</div>
<div class="child">Child 3</div>
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/370591.html
標籤：javascript css 蠢货 弹性盒