在下面的代码中,我正在尝试使用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(组件的高度和宽度必须适应).
所以,我需要让第二行中的滚动条高于该内容,而不是占用该空间.
解决方法
我发现,存在溢出:叠加,它可以按我的意愿工作.
它呈现滚动条,但不占用该空间
见:demo