flex shrink 0 causes scrollbar to disappear and it ignores overflow auto in fire fox edge and ie but not in chrome why

Question

This code is designed to show the numbers in column reverse order from 1 to 4 so I suddenly realize I did not like how display flex was setting the .numbers height and it was ignoring my height in 200px in the numbers class name so I added

flex-shrink: 0;

and it prevented display flex from setting it's own height and it suddenly showed the .numbers original height so I was happy :)

so this is how it looks in Chrome

but sadly flex-shrink: 0 gave strange results in Edge, IE and Fire fox I notice in those browsers it removed the scrollbar and it ignored the overflow-y: auto; mentioned in the #numbers-container.

How can I get it to work like the chrome browser in those other browsers that it did not work in ? :(

Code

#container{
  background-color: #d6b68d;
  height: 500px;
  width: 500px;
  border-radius: 8px;
  position: relative;
}

#numbers-container{
  background-color: orange;
  height: 90%;
  width: 90%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column-reverse;
}

.numbers{
  background-color: forestgreen;
  display: block;
  height: 200px;
  width: 100%;
  position: relative;
  border: 2px solid white;
  flex-shrink: 0;
}

.numbers h1{
  text-align: center;
  color: white;
}

<div id='container'>
  <div id='numbers-container'>
    
    <div class='numbers'>
      <h1>1</h1>
    </div><!--</numbers>-->
 
    <div class='numbers'>
      <h1>2</h1>
    </div><!--</numbers>-->

    <div class='numbers'>
      <h1>3</h1>
    </div><!--</numbers>-->

    <div class='numbers'>
      <h1>4</h1>
    </div><!--</numbers>-->
    
  </div><!--</numbers-container>-->
</div><!--</container>-->

different browsers look at `flex` very differently. See known issues here. https://caniuse.com/#search=flex — Stender, Nov 07 '18 at 10:34
If you want cross-browsers workaround - the community made some here : https://github.com/philipwalton/flexbugs — Stender, Nov 07 '18 at 10:35

Pete · Answer 1 · 2018-11-07T10:46:19.713

You could move the scrolling onto it's own container:

/* CSS used here will be applied after bootstrap.css */

#container {
  background-color: #d6b68d;
  height: 500px;
  width: 500px;
  border-radius: 8px;
  position: relative;
}

#scroll {
  height: 90%;
  width: 90%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  overflow-y: auto;
}

#numbers-container {
  background-color: orange;
  overflow-x: hidden;
  display: flex;
  flex-direction: column-reverse;
}

.numbers {
  background-color: forestgreen;
  display: block;
  height: 200px;
  width: 100%;
  position: relative;
  border: 2px solid white;
  flex-shrink: 0;
}

.numbers h1 {
  text-align: center;
  color: white;
}

<div id="container">
  <div id="scroll">
    <div id="numbers-container">

      <div class="numbers">
        <h1>1</h1>
      </div>
      <!--</numbers>-->

      <div class="numbers">
        <h1>2</h1>
      </div>
      <!--</numbers>-->

      <div class="numbers">
        <h1>3</h1>
      </div>
      <!--</numbers>-->

      <div class="numbers">
        <h1>4</h1>
      </div>
      <!--</numbers>-->

    </div>
    <!--</numbers-container>-->
  </div>
  <!--</scroll-container>-->
</div>
<!--</container>-->

However, if you want to start your scroll from the bottom, you would probably need to use js

flex shrink 0 causes scrollbar to disappear and it ignores overflow auto in fire fox edge and ie but not in chrome why

1 Answers1