html滚动条根据内容滚动,html – 滚动条高于内容

在下面的代码中,我正在尝试使用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;

}

1

2

3

1

huge content

3

1

2

3

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

我不能用的东西：

>我自己实现的滚动条(性能是一个问题).

>固定宽度的列或.container(组件的高度和宽度必须适应).

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