使内容在容器内水平滚动

Question

所以我想要创建一个类似于这里的效果：https://www.bookdepository.com/，不适合水平放置的书籍只向右滚动。我尝试了这个帖子中的第一个回复：Make content horizontally scroll inside a div但没有运气。任何关于如何使这项工作的想法或想法将不胜感激。谢谢你的时间。

目前，我看起来像这样：Screenshot

呈现页面的代码：

<div class="container mainContent">
<div class="col-md-12 ">
    <h3>Other books in @Model.BookModel.Genre</h3>

    <div class="container-outer">
        @{

            foreach (var book in Model.SqlBookstoreDataModel.GetByGenre(@Model.BookModel.Genre))
            {
                if (book.Genre.Equals(Model.BookModel.Genre))
                {
                    <div class="col-md-2 col-sm-3 bookWrapper ">
                        <div class="hvr-shrink bookThumbnail">
                            <a href="">
                                <div class="hvr-shadow hvr-glow">
                                    <img src=@book.Thumbnail />
                                </div>
                            </a>
                        </div>


                        <a asp-action="Details" asp-route-id="@book.Id">
                            <div class="bookInfo">
                                <p class="Title ">@book.Title </p>
                                <p class="Author">@book.Author</p>
                                @{
                                    if (book.Price.Equals("Not Available"))
                                    {
                                        <p class="indexPrice">@book.Price</p>
                                    }
                                    else
                                    {
                                        <p class="indexPrice">@book.Price Kn</p>
                                    }
                                }
                            </div>
                        </a>

                        <div class="buttonWrap">
                            <button type="button" class="btn btn-primary AddToCartButton hvr-glow">Add to Cart</button>
                        </div>


                    </div>
                }
            }
        }
    </div>
</div>