css - 具有垂直列的水平网站

Question

我正在尝试在 css 中创建此布局:

一些博客(例如 http://css-tricks.com/how-to-create-a-horizontally-scrolling-site/)提到最好的方法是使用表格布局。它确实有效，但问题是我无法滚动各个垂直面板，它们总是占据它们的实际内容。我试图为每个显式设置高度，但它总是被忽略。

CSS:

main {

    width: 100%;
    overflow: auto;

    .cycle-progress{
        display: table;
        table-layout: fixed;
        width: 100%;
    }

    .cycle-progress > div{
        display: table-cell;
        width: 600px;
        height: 1000px;
        h1{
            background-color: #ffde17;
            text-transform: uppercase;
        }

    }

    .cycle-progress > div:nth-child(even){
        background-color: white;
    }

}

HTML

<main>

    <div class="cycle-progress">
        <!--ng-init="timeline =  $('.timeline').timeline()" -->
        <div ng-repeat="pc in production_cycles" ng-controller="ProductionCycleCtrl" data-pcid="{{pc.id}}">
            <h1 class="text-center m-t-none">{{pc.name}}</h1>
            <div class="row">
                <div class="col-lg-4 padder-lg">
                    <img src="/src/img/pc-init.svg" style="width: 200px" />
                </div>
                <div class="col-lg-8">

                    <div timeline class="timeline"></div>

                </div>
            </div>
            <!--<div style="height: 1000px; background-color: red"></div>-->
        </div>  
    </div>


</main>

Answer 1

根据需要调整大小以占据尽可能多的水平空间的 flexbox 应该可以工作:

body {
  display: flex;
  max-height: 100vw;
  flex-direction: column;
}

.container {
  display: flex;
  width: fit-content;
}

.column {
  max-height: 100%
  overflow-y: auto;
}

对于不支持 flexboxes 的浏览器，将列样式设置为内联 block ，将它们的父级设置为 no-wrap 也可能有效。