Html 带水平滚动条的100%高度容器_Html_Css_Twitter Bootstrap 3

Html 带水平滚动条的100%高度容器

html css twitter-bootstrap-3

Html 带水平滚动条的100%高度容器,html,css,twitter-bootstrap-3,Html,Css,Twitter Bootstrap 3,我想创建一个容器，它在浏览器中的水平跨度为100%，但——这是一个问题——无论内容有多宽，都会显示固定的水平滚动条。想想Microsoft Azure Portal（如果您知道，它是如何工作的）目前我正在使用以下SCS： body, html { height: 100%; } .editor-container { display: flex; height: calc(100% - 50px); width: 100%; overflow-x: s

我想创建一个容器，它在浏览器中的水平跨度为100%，但——这是一个问题——无论内容有多宽，都会显示固定的水平滚动条。想想Microsoft Azure Portal（如果您知道，它是如何工作的）

目前我正在使用以下SCS：

body, html {
    height: 100%;
}

.editor-container {
    display: flex;
    height: calc(100% - 50px);
    width: 100%;
    overflow-x: scroll;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: stretch;
}

.editor-item {
    margin: 10px;
    width: 300px;

    .panel {
        height: calc(100% - 20px);
        margin: 10px;
    }
}

站点顶部包含Bootstrap的导航，下面是内容：

<body>    
    <nav class="navbar navbar-default">
    (...)
    </nav>

    <div class="editor-container">
        <div class="editor-item">
            <div class="panel panel-default">
                <div class="panel-heading">
                    Heading
                </div>
                <div class="panel-body">
                    Body
                </div>
            </div>
        </div>
        <div class="editor-item"></div>
        <div class="editor-item"></div>
    </div>


(...)
标题
身体

我的问题是，尽管容器实际上是100%垂直扩展的，但水平滚动条被推出页面，垂直滚动条出现

我如何确保水平滚动条显示在底部，而没有垂直滚动条？

这是可能的，但使用引导会使其更复杂…@Johannes这可能有多准确？这可能，但使用引导会使其更复杂…@Johannes这可能有多准确？