html – 滚动条高于内容

前端之家收集整理的这篇文章主要介绍了html – 滚动条高于内容前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
在下面的代码中,我正在尝试使用flexBox显示模型构建表格设计.
  1. .wrapper {
  2. width: 500px;
  3. height: 150px;
  4. background: grey;
  5. }
  6. .container {
  7. display: flex;
  8. flex-direction: column;
  9. height: 100%;
  10. }
  11. .row {
  12. display: flex;
  13. flex-direction: row;
  14. flex: 1;
  15. border: 3px solid green;
  16. }
  17. .cell {
  18. flex: 1;
  19. border: 1px solid red;
  20. }
  1. <div class="wrapper">
  2. <div class="container">
  3. <div class="row">
  4. <div class="cell">1</div>
  5. <div class="cell">2</div>
  6. <div class="cell">3</div>
  7. </div>
  8. <div class="row" style="overflow: auto;">
  9. <div class="cell">1</div>
  10. <div class="cell">
  11. <div style="height: 200px;">huge content</div>
  12. </div>
  13. <div class="cell">3</div>
  14. </div>
  15. <div class="row">
  16. <div class="cell">1</div>
  17. <div class="cell">2</div>
  18. <div class="cell">3</div>
  19. </div>
  20. </div>
  21. </div>

我的问题是,在第二行(带有“巨大的内容”)是滚动条,并且滚动条占用了我的行单元格空间,这是一个很大的问题,因为我的列宽度不同,看起来不像一张桌子.

我不能用的东西:

>我自己实现的滚动条(性能是一个问题).
>固定宽度的列或.container(组件的高度和宽度必须适应).

Real world usage of component

所以,我需要让第二行中的滚动条高于该内容,而不是占用该空间.

解决方法

我发现,存在溢出:叠加,它可以按我的意愿工作.

它呈现滚动条,但不占用该空间

见:demo

猜你在找的HTML相关文章