在下面的代码中,我尝试使用flexbox显示模型来构建表格样式的设计。
.wrapper {
width: 500px;
height: 150px;
background: grey;
}
.container {
display: flex;
flex-direction: column;
height: 100%;
}
.row {
display: flex;
flex-direction: row;
flex: 1;
border: 3px solid green;
}
.cell {
flex: 1;
border: 1px solid red;
}
<div class="wrapper">
<div class="container">
<div class="row">
<div class="cell">1</div>
<div class="cell">2</div>
<div class="cell">3</div>
</div>
<div class="row" style="overflow: auto;">
<div class="cell">1</div>
<div class="cell">
<div style="height: 200px;">huge content</div>
</div>
<div class="cell">3</div>
</div>
<div class="row">
<div class="cell">1</div>
<div class="cell">2</div>
<div class="cell">3</div>
</div>
</div>
</div>
我的问题是,在第二行(那个“巨大的内容”)中有一个滚动条,而且滚动条正在从我的行单元格中占用空间,这是一个巨大的问题,因为我的列没有相同的宽度,看起来不像表格。
我不能使用的东西:
- 自己实现滚动条(性能是一个问题)。
- 固定列或
.container
的宽度(组件的高度和宽度必须适应)。
所以,我需要让第二行的滚动条位于内容上方,而不是占用那个空间。