CSS для div Scrolling несовместим

Question

Я пытаюсь создать «книжную полку», используя html и sass (Примечание: это в значительной степени основано на http://ameijer.nl/2013/03/bookshelf-css-only/). Вы можете увидеть мою версию концепции здесь:

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

Я пытаюсь показывать горизонтальную полосу прокрутки, только когда это необходимо для конкретной «книжной полки» - например, на полке «Чтение» выше, - но не отображать ее, когда в этом нет необходимости - см. «Чтение» & «На палубе» по ссылке.

Я ожидал использовать "overflow: auto;" дал бы мне этот эффект, но это, кажется, заставляет полосу прокрутки появляться всегда.

Соответствующий файл sass находится здесь: https://github.com/mainstringargs/mainstringargs.github.io/blob/master/src/styles/_bookshelf.scss

Как я могу показывать только горизонтальную полосу прокрутки, когда это необходимо для каждой конкретной книжной полки?

Например, в настоящее время это выглядит так с горизонтальными полосами прокрутки на обеих отображаемых книжных полках, даже когда книг недостаточно:

Я хочу, чтобы он выглядел следующим образом (обратите внимание, что на нижней книжной полке нет горизонтальной полосы прокрутки, потому что там недостаточно книг, а на верхней - потому что книг достаточно для прокрутки):

Answer 1

Вы можете использовать flexbox и позволить .books переполнению против .shelf, просто обязательно удалите width: 1470px; из .books, .shelf:after:

.shelf {
    height:auto;
    overflow: hidden;
    padding: 0;
}
.books {
    position: relative;
    white-space: nowrap;
    display: flex;
    flex-wrap: nowrap;
    overflow: auto;
    align-items:flex-start;
    justify-content: flex-start;
    height: 420px;
    z-index: 1;
}
.books, .shelf:after {
    /* width: 1470px; */
    box-sizing: border-box;
    padding: 40px 30px;
    margin: 0;
    width: 100%;
}
.book {
    flex-shrink: 0;
}

Answer 2

Глядя на свой код, если вы хотите применять только горизонтальную прокрутку, когда это необходимо, а не вертикально.

Используйте следующее имя вашего класса:

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

Попробуйте, посмотрите, работает ли он. Нет необходимости добавлять прокрутку, но пусть браузер решит с установленным «auto».