Flexbox overflow when the container reach minimum size

Question

I have a flex column container with 2 div inside. The first div have flex: 1 to make it grow with the remaining space. The second div have a fixed height. Note that the container is inside a fixed div taking the whole viewport.

The problem is that when the container is too small to fit the content, the first div's content overflow under the second one.

.test {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: red;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  //min-height: 500px;
}
.child1 {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}
.child2 {
  width: 100%;
  display: flex;
  justify-content: center;
}
span {
  padding: 20px;
}
span:first-child {
  margin-top: auto;
}
span:last-child {
  margin-bottom: auto;
}

<div class="test">
  <div class="child1">
    <span>Test1</span>
    <span>Test2</span>
    <span>Test3</span>
    <span>Test4</span>
    <span>Test5</span>
    <span>Test6</span>
    <span>Test7</span>
    <span>Test8</span>
  </div>
  <div class="child2">
    <span>Test1</span>
    <span>Test2</span>
    <span>Test3</span>
    <span>Test4</span>
  </div>
</div>

Here is a codepen example.

One solution could be to set a minimum height on the container, but it's not a dynamic and responsive solution.

Can someone tell me how to achieve an overflow behavior on the container when the whole content does not fit?

any reason to use position:fixed; ?? cause: http://codepen.io/gc-nomade/full/jAaoGQ/ / http://codepen.io/gc-nomade/pen/jAaoGQ is fine .... — G-Cyrillus, Jul 13 '16 at 20:31
@GCyrillus The `position: fixed` is for my overlapping menu. I'm just making sure everything is like my project. — Simon, Jul 13 '16 at 20:39
okay, then just add an overflow to fix it it and update also flex value (includes chrome) http://codepen.io/gc-nomade/pen/EybzpV — G-Cyrillus, Jul 13 '16 at 20:57

G-Cyrillus · Accepted Answer · 2016-07-13T21:36:32.500

you may add overflow:auto to .test and update flex value on .child1: DEMO to play with

.test {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: red;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow:auto;/* update */
}

.child1 {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content:center;/* update (IE)*/
  flex: 1 0 auto;/* update *//* flex-shrink:0 allow element to expand and push next container else overflow defaut  is visible IF SET TO 1 */
}

.child2 {
  width: 100%;
  display: flex;
  justify-content: center;
}

span {
  padding: 20px;
}

span:first-child {
  margin-top: auto;
}

span:last-child {
  margin-bottom: auto;
}

<div class="test">
  <div class="child1">
    <span>Test1</span>
    <span>Test2</span>
    <span>Test3</span>
    <span>Test4</span>
    <span>Test5</span>
    <span>Test6</span>
    <span>Test7</span>
    <span>Test8</span>
  </div>
  <div class="child2">
    <span>Test1</span>
    <span>Test2</span>
    <span>Test3</span>
    <span>Test4</span>
  </div>
</div>

Working as expected, thank you! Could you edit your answer to explain why `flex-shrink: 0` solved the problem? — Simon, Jul 13 '16 at 21:09
@Simon updated with CSS comment /*flex-shrink:0 allow element to expand and push next container else overflow defaut is visible IF SET TO 1 */ — G-Cyrillus, Jul 13 '16 at 21:37

Flexbox overflow when the container reach minimum size

1 Answers1