html - 使内部容器以 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;
}

解决方案

方案一

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

解决方案2

将width: 100% 声明添加到body 元素