How does overflow works with flex-basis

Question

I want to create a scrollable flex item. In a flex item containing overflow: auto, when flex-basis: 0, it works fine, but when i set flex-basis: 0% (which is default), flex item is overflowed but it's also scrollable.

In the below code snippet,

what exactly % in flex-basis refers to
why overflow works fine with flex-basis: 0 on .grand-child-1 but not with flex-basis: 0%
why setting overflow: auto on .child-2 solves the issue

.main {
  background-color: lightgrey;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.parent {
  width: 80%;
  height: 80%;
  border-right: 5px solid black;
  display: flex;
  flex-direction: column;
}

.child-1, .child-3 {
  flex: 1;
  background-color: white;
}

.child-2 {
  flex: 5;
  background-color: pink;
  border-right: 5px solid orange;

  /* why this solves the issue */
  /* overflow: auto; */

  display: flex;
  flex-direction: column;
}

.grand-child-1 {
  flex-grow: 1;

  /* why changing this from 0% to 0 solves the issue */
  flex-basis: 0%;

  overflow: auto;
  border-right: 5px solid red;
  background-color: grey;
}

.grand-child-2 {
  flex: 1;
  background-color: skyblue;
}

.max-div {
  height: 600px;
  background-color: lightseagreen;
}

<div class="main">
  <div class="parent">
    <div class="child-1"></div>
    <div class="child-2">
      <div class="grand-child-1">
        <div class="max-div"></div>
      </div>
      <div class="grand-child-2"></div>
    </div>
    <div class="child-3"></div>
  </div>
</div>

with flex-basis: 0 on .grand-child-1

.main {
  background-color: lightgrey;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.parent {
  width: 80%;
  height: 80%;
  border-right: 5px solid black;
  display: flex;
  flex-direction: column;
}

.child-1, .child-3 {
  flex: 1;
  background-color: white;
}

.child-2 {
  flex: 5;
  background-color: pink;
  border-right: 5px solid orange;

  /* why this solves the issue */
  /* overflow: auto; */

  display: flex;
  flex-direction: column;
}

.grand-child-1 {
  flex-grow: 1;

  flex-basis: 0;

  overflow: auto;
  border-right: 5px solid red;
  background-color: grey;
}

.grand-child-2 {
  flex: 1;
  background-color: skyblue;
}

.max-div {
  height: 600px;
  background-color: lightseagreen;
}

<div class="main">
  <div class="parent">
    <div class="child-1"></div>
    <div class="child-2">
      <div class="grand-child-1">
        <div class="max-div"></div>
      </div>
      <div class="grand-child-2"></div>
    </div>
    <div class="child-3"></div>
  </div>
</div>

with overflow: auto on .child-2

.main {
  background-color: lightgrey;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.parent {
  width: 80%;
  height: 80%;
  border-right: 5px solid black;
  display: flex;
  flex-direction: column;
}

.child-1, .child-3 {
  flex: 1;
  background-color: white;
}

.child-2 {
  flex: 5;
  background-color: pink;
  border-right: 5px solid orange;

  overflow: auto;

  display: flex;
  flex-direction: column;
}

.grand-child-1 {
  flex-grow: 1;

  /* why changing this from 0% to 0 solves the issue */
  flex-basis: 0%;

  overflow: auto;
  border-right: 5px solid red;
  background-color: grey;
}

.grand-child-2 {
  flex: 1;
  background-color: skyblue;
}

.max-div {
  height: 600px;
  background-color: lightseagreen;
}

<div class="main">
  <div class="parent">
    <div class="child-1"></div>
    <div class="child-2">
      <div class="grand-child-1">
        <div class="max-div"></div>
      </div>
      <div class="grand-child-2"></div>
    </div>
    <div class="child-3"></div>
  </div>
</div>

This could be a browser glitch. Which browser are you using? Have you tested your code in Chrome, Firefox, Edge and Safari? Is the behavior consistent across all browsers? — Michael Benjamin, Nov 16 '19 at 14:54
Also keep this in mind: [Working with the CSS `height` property and percentage values](https://stackoverflow.com/a/31728799/3597276) — Michael Benjamin, Nov 16 '19 at 14:55
And this: [Chrome / Safari not filling 100% height of flex parent](https://stackoverflow.com/q/33636796/3597276) — Michael Benjamin, Nov 16 '19 at 14:56
and this too: https://stackoverflow.com/a/42630660/8620333 (the default value isn't 0% like you think) — Temani Afif, Nov 16 '19 at 14:58
@Michael_B this indeed seems to be a browser glitch. i tested this only in chrome when posting the question, but now i tested this in chrome, firefox and safari. in safari, it works fine but in chrome and firefox, issue is there — barley, Nov 16 '19 at 15:58

How does overflow works with flex-basis

0 Answers0