用于div滚动的CSS不一致

Question

我正在尝试使用html和sass创建一个“书架”（注意：这很大程度上基于http://ameijer.nl/2013/03/bookshelf-css-only/）。您可以在这里看到我的概念版本：

https://mainstringargs.github.io/bookshelf.html

我试图仅在必要时显示特定“书架”的水平滚动条-例如，在上方的“阅读”书架中-但在不需要时不显示水平滚动条-请参阅“阅读”＆链接上的“在甲板上”。

我期望使用“溢出：自动；”会给我这种效果，但这似乎导致滚动条始终出现。

相关的sass文件在这里：https://github.com/mainstringargs/mainstringargs.github.io/blob/master/src/styles/_bookshelf.scss

如何仅在每个特定书架需要时显示水平滚动条？

作为示例，即使没有足够的书籍，当前在两个显示的书架上都具有水平滚动条，如下所示：

我希望它看起来像这样的模型（请注意，底部的书架没有水平滚动条，因为那里没有足够的书，但是顶部的书架却有水平的滚动条，因为有足够的书可以滚动）：

Answer 1

通过查看代码，如果您只想在必要时应用水平滚动而不是垂直滚动。

在您的班级名称上使用以下内容：

.books {
    overflow-x: auto; // Auto horizontal
    overflow-y: hidden; // Disable vertical scrolling
}

尝试看看是否可行。无需添加滚动，但让浏览器决定是否设置了“自动”。

Answer 2

您可以使用flexbox并让if os.path.exists(os.path.join(directory, name)): 与.books溢出，只需确保从.shelf中删除width: 1470px;：

.books, .shelf:after