html - Make inner container in flex layout fit screen size

Question

I have the following html and css code:

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>

You see that there is a very big container which doesn't fit a normal screen size. That's why I am using inner-box for setting the max width to 100% and for enabling a horizontal scrollbar. The problem is that the scrollbar for the container inner-box does not appear. I only have a scrollbar for the whole window. I know that I can fix my problem by removing display: flex from html and flexbox, but unfortunately these properties are coming from a css framework and I cannot change anything about that. So do you have any other ideas to enable the scrollbar for inner-box?

question from:https://stackoverflow.com/questions/65885838/make-inner-container-in-flex-layout-fit-screen-size

Answer 1

Reason

display: flex declaration in the html element enables the flex context for all the direct children of html.

As no flex-direction and flex-wrap properties declared, their default values would get applied on html.

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

Solutions

Solution 1

Add flex-direction: column declaration to html element

Solution 2

Add width: 100% declaration to body element