Flexbox Misbehaving with Max-Height

Flex box bug with max-height in chrome v43

There is a problem with max-heigth and flexbox: flexbox misbehaving with max-height

So the solution is to set the flex property to every element insight rows container to 0

.rows .main {
  flex: 1;
}

.rows > * {
  flex: 0 0 auto
}

css - scroll issue with flexbox and max-height

It is a bug, in Chrome, a test in FF and Edge, it works fine.

Since you use full viewport height, change the max-height: 40%; to max-height: 40vh;.

Another way, as in below sample, is to change the 100% in height: 100% to 100vh.

I guess this works better because viewport units like vh is a fixed unit, which percent is not.

Plnkr demo: https://plnkr.co/edit/66W4a2lOI58XLudCmkw9?p=preview

html {

  height: 100vh;

}

body {

  height: calc(100vh - 16px);

}

.main {

  display: flex;

  flex-direction: column;

  height: 100vh;

  width: 100%;

}

.max,

.all {

  display: flex;

  flex-direction: column;

  width: 100%;

  overflow-y: auto;

}

.max {

  flex: 0 1 auto;

  min-height: 103px;

  max-height: 40%;

  background-color: green;

}

.all {

  flex: 1 1 auto;

  min-height: 235px;

  background-color: blue;

}

.content {

  flex: 0 0 auto;

  box-sizing: border-box;

  height: 200px;

  margin: 5px;

  border: 1px dashed black;

  background-color: white;

}

<div class="main">

  <div class="max">

    <div class="content"></div>

  </div>

  <div class="all">

    <div class="content"></div>

  </div>

</div>

Flexbox max-height percentage value somehow related to the parent container percentage value

agrm is right, the 100vh is inherited to the childeren. To solve this and get expected behavior you need to not just set min-height to 50% but also set height to 50% (both in the parent-container, i.e. .item-image). Then the output will show a 25% coverage by the transparant banner.

This can be considered best practice as it will provide 'consistent layout behavior' in case there is suddenly just 1 div element (instead of two) in the viewport. This one element will then be stretched in height by flexbox to fullscreen height and the transparant banner will still cover it for 25%. Whereas in case of not setting the height on the parent-container I ended up with a banner which persisted its seize resulting in a too small banner height (12.5%) relative to the image.

Nesting flexbox layout causes scrollable area to misbehave

You can fix this one by just setting 100% width on .editor.

Since the parent already has flex-wrap: wrap, this should work out just fine for you. The content below the editor will just wrap to below it.

.editor { /* <-- add this */
  width: 100%;
}

body {
    background-color: lightgrey;
}
.page-container {
    width: 800px;
    background-color: white;
}

.product-page {
    display: flex; /* Disable me to make scrolling work */
    flex-wrap: wrap;
}
.uploads-container {
    text-align: left;
    white-space: nowrap;
    padding: 5px;
    border: 1px solid black;
    display: flex;
    box-sizing: border-box;
}

.uploads-scroller {
    overflow-x: scroll;
    flex: 1 1 auto;
    overflow-y: hidden;
}
.image-thumbs-container {
    border: initial;
}
.image-thumb {
    display: inline-block;
    width: 100px;
    border: solid 2px grey;
    border-radius: 5px;
    margin-right: 2px;
    vertical-align: top;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="mock.css">
    <title>Mockup</title>
</head>
<body>
    <div class="page-container">
        <div class="product-page">
            <div class="unrelated-content">Page contains other content required to layout by flexbox.</div>

            <div class="editor">
                <div class="uploads-panel">
                    <div class="uploads-container">
                        <div class="uploads-file-container">File Upload<br>Widget Goes<br>Here</div>
                        <div class="uploads-scroller">
                            <div class="image-thumbs-container">
                                <div class="image-thumb">Thumb<br>Example</div>
                                <div class="image-thumb">Thumb<br>Example</div>
                                <div class="image-thumb">Thumb<br>Example</div>
                                <div class="image-thumb">Thumb<br>Example</div>
                                <div class="image-thumb">Thumb<br>Example</div>
                                <div class="image-thumb">Thumb<br>Example</div>
                                <div class="image-thumb">Thumb<br>Example</div>
                                <div class="image-thumb">Thumb<br>Example</div>
                                <div class="image-thumb">Thumb<br>Example</div>
                                <div class="image-thumb">Thumb<br>Example</div>
                                <div class="image-thumb">Thumb<br>Example</div>
                                <div class="image-thumb">Thumb<br>Example</div>
                                <div class="image-thumb">Thumb<br>Example</div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="workspace">
                    <h2>Some complicated workspace content goes here.</h2>
                </div>
            </div>

            <div class="unrelated-content">Page contains other content required to layout by flexbox.</div>
        </div>
    </div>
</body>
</html>

Overflow of item inside nested flex containers in Firefox

I could solve it adding overflow-y: auto; to your #middle element.
Seems like flex is not taking into account that max-height: 100% for Firefox. If you remove it makes no difference.

Btw, I got the idea tweaking a little a jsFiddle I found in the question flexbox misbehaving with max-height

html,

body {

  width: 100%;

  height: 100%;

  margin: 0px;

}

body {

  text-align: center;

  display: flex;

  flex-direction: column;

}

#top {

  background-color: #005200;

  color: white;

}

#bottom {

  background-color: #BC0203;

  color: white;

}

#middle {

  flex-grow: 2;

  background-color: #FD9800;

  display: flex;

  flex-direction: row;

  overflow-y: auto;

}

#left {

  width: 50%;

  border-right: 1px solid black;

}

#right {

  width: 50%;

  overflow-y: auto;

}

<div id="top">

  <h1>If you're the big tree</h1>

</div>

<div id="middle">

  <div id="left">

    We are the small axe

    <!--SVG will go here -->

  </div>

  <div id="right">

    <p>

      Ready

      <br>

      <br>

      <br>

      <br>to

      <br>

      <br>

      <br>

      <br>cut

      <br>

      <br>

      <br>

      <br>you

      <br>

      <br>

      <br>

      <br>down

    </p>

  </div>

</div>

<div id="bottom"><em>To cut you down</em>

</div>