使flex布局中的内容器适合屏幕大小

Question

我有以下html和css代码:

JSFiddle

/** CSS Framework: START **/
html {
display: flex;
}
.flexbox {
display: flex;
}
/** CSS Framework: END**/
.inner-box {
width: 100%;
overflow-x: scroll;
}
.very-big-container {
width: 4000px;
}

<div class="flexbox">
<!-- I can change everything starting from here -->
<div class="inner-box">
<div class="very-big-container">
Foobar
</div>
</div>
</div>

你看到有一个非常大的容器，不适合正常的屏幕尺寸。这就是为什么我使用inner-box设置最大宽度为100%，并启用水平滚动条。问题是，滚动条的容器inner-box没有出现。我只有整个窗口的滚动条。我知道我可以通过从html和flexbox中移除display: flex来解决我的问题，但不幸的是，这些属性来自css框架，我无法改变任何事情。那么你有什么其他的想法来启用inner-box的滚动条吗?

Answer 1

原因

html元素中的display: flex声明为html的所有直接子元素启用flex上下文。

由于没有声明flex-direction和flex-wrap属性，它们的默认值将应用于html。

html {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}

<标题>解决方案

解决方案1

为html元素添加flex-direction: column声明

解决方案2

为body元素添加width: 100%声明

Answer 2

您可以使用width: 100vw;

看例子