css - 带有滚动部分的 Flexbox，它有一个粘性工具栏

Question

我想创建一个包含滚动面板的 flexbox 布局，但在每一列中都有一个始终可见的固定工具栏。

这是我目前所拥有的: https://jsfiddle.net/TheFiddler/c7szbfhq/

.scroll-panel {
        display: flex;
        border: 2px dashed rgba(114, 186, 94, 0.35);
        overflow: scroll;
        flex-wrap: nowrap;
        height: 100%;
        -webkit-overflow-scrolling: touch;
    }

    .item {
        margin-right: 10px;
        width: 500px;
        border: 1px solid red;
        overflow: hidden;
        flex: 1 0 auto;
    }

    .item-body {
        flex-grow: 1;
    }

    .item-sticky-footer {
        flex-shrink: 0;
        flex-basis: 60px;
        align-self: flex-end;
        bottom: 30px;
        height: 60px;
    }

有两个问题:

1) item-sticky-footer 不会停留在 item 列的底部。它应始终位于包装行页脚旁边的底部。

2) 滚动面板内的元素不应溢出。它应该保持布局内容的最大高度。如果将图像的高度更改为 3000px，则页脚会被下推。滚动面板在不应该拉伸(stretch)的时候拉伸(stretch)。

我想要一个轮播元素，每个元素都有一个工具栏，该工具栏位于列内并始终位于底部。

经过搜索，我没有找到处理粘性工具栏部分的问题。

Answer 1

1) 添加display: flex; flex-direction: column; 用于 .item。然后，您还可以从 .item-sticky-footer 中删除 align-self: flex-end 等等。

.item {
    margin-right: 10px;
    width: 500px;
    border: 1px solid red;
    overflow: hidden;
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
}

2) 为了保持每个元素的高度，您可以为 .scroll-panel 设置总视口(viewport)高度 (100vh) 并减去 header 和 footer heights(您可能明确知道这些高度)，使用 calc:max-height: calc(100vh - header height - footer height - extras ). 所以它会根据窗口限制高度。像这样:

.scroll-panel {
    display: flex;
    border: 2px dashed rgba(114, 186, 94, 0.35);
    overflow: scroll;
    flex-wrap: nowrap;
    height: 100%;
    -webkit-overflow-scrolling: touch;
    max-height: calc(100vh - 42px);
}

我希望这有助于解决问题或为您提供一条可遵循的道路。