Using flex-basis: 0% yields a different outcome compared to using flex-basis: 0px in CSS

As stated on MDN, the shorthand flex: 1 is supposed to establish flex-basis: 0. Surprisingly, it sets flex-basis: 0% instead, leading to unexpected behavior.

In the given example, I anticipated that div.middle would shrink and allow scrolling due to having overflow-y: auto and flex: 1, which should imply flex-basis: 0. However, this is not the case - the entire body scrolls because it refuses to shrink. Uncommenting the explicit flex-basis: 0 rectifies the issue.

body {
  text-align: center;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0;
}
.outer {
  min-height: 100%;
  display: flex;
  background: #99f;
  flex-direction: column;
}
.middle {
  background: #f99;
  flex: 1;
  /*flex-basis: 0;*/
  overflow-y: auto;
}
<div class='outer'>
  <div class='top'>top</div>
  <div class='middle'>
    A
    <div style='height:800px'></div>
    B
  </div>
  <div class='bottom'>bottom</div>
</div>

I have tested this scenario in both Chrome 84.0 and Firefox 68.11.0esr, and they exhibit the same unexpected behavior.

  1. What causes the difference between flex-basis: 0% and flex-basis: 0?
  2. Why does flex: 1 establish flex-basis: 0% rather than flex-basis: 0?
cssflexbox

Answer №1

The issue arises from the use of percentages in setting heights. Using 0 or 0px is straightforward as it sets the initial height to zero and allows the element to expand to occupy the available space.

However, using N% introduces a different scenario where the initial height is determined by the parent's height.

Percentages are relative to the flex container’s inner main sizeref

In this case, if the flex container lacks an explicit size and only has a min-height definition, resolving the percentage value becomes impossible, leading to a failure and reverting to auto.

If you replace min-height with height, both will function similarly:

body {
  text-align: center;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0;
}
.outer {
  height: 100%;
  display: flex;
  background: #99f;
  flex-direction: column;
}
.middle {
  background: #f99;
  flex: 1;
  /*flex-basis: 0;*/
  overflow-y: auto;
}
<div class='outer'>
  <div class='top'>top</div>
  <div class='middle'>
    A
    <div style='height:800px'></div>
    B
  </div>
  <div class='bottom'>bottom</div>
</div>

Why does flex: 1 set flex-basis: 0% instead of flex-basis: 0?

Learn more here: What does flex: 1 mean? It's important to note that not all browsers interpret flex:1 as equal to flex:1 1 0

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Create a stylish slide-in menu using CSS, triggered by an onclick event. No JavaScript required!

I implemented a hamburger menu that slides in when clicked. However, I'm facing an issue where the slide-in menu disappears after a second. How can I make sure the menu stays visible? #navigationWrap { position: fixed; top: 0; ...

htmlcss

The div element on my website spans the entire width, yet it appears slightly narrower than the body

My website features a scrolling div element that spans 100% of the screen, but I am encountering an issue with slight horizontal scrolling and the background image extending beyond the visible area. I am striving to adjust the width of the div so that it ...

htmlcss

What are some ways to customize the appearance of my ReactJS application while it's being viewed on Chrome on

I'm currently in the process of running my ReactJS app on a Panasonic Vierra Smart TV browser. After importing core-js and babel-polyfill, I managed to load the webpage but encountered an issue with the UI alignment. The styling does not display corre ...

cssreactjssmart-tvbabel-polyfill

Tips for utilizing flexbox and React-Native to ensure a cropped image takes up the entire View

I'm trying to create a cropped image that fills the entire screen in my app. Currently, my code looks like this: https://i.stack.imgur.com/9DtAc.png However, I want the small square of Homer eating donuts to occupy the entire screen, similar to the ...

javascriptcssreact-nativeflexboxreact-native-flexbox

When YII_DEBUG is disabled, the CSS will not be implemented

My website is built using Yii along with YiiBooster. Everything works fine when I am in DEBUG mode - all styles load and apply correctly. However, when I set YII_DEBUG to false in the index.php file, the CSS files still show as loaded in Firebug, but it ap ...

phpcsstwitter-bootstrapyiiproduction-environment

Remove the unnecessary space at the bottom of the Mat Dialog

I'm currently utilizing Angular Material within my Angular application. One issue I am facing is the excessive whitespace at the bottom of a dialog that displays information about a post. How can I reduce or eliminate this unnecessary space? Take a l ...

htmlcssangularangular-materialdialog

Show the center portion of an image without needing to know the size, both horizontally and vertically aligned

I have experimented with various methods like table-cell, but none of them have been successful. All I am seeking is an <img src="" /> within an <a> tag. The <a> element has specific width, height, and overflow:hidden properties set. H ...

htmlcss

I'm currently designing pop-up notifications for a project I'm developing. The button appears on screen, but for some reason, the pop-up feature isn't functioning as intended

`I am currently working on a game project for my class, aiming to create a nostalgic web-based choose-your-own-adventure game similar to the ones I enjoyed playing years ago. I want the experience to be challenging, where making the wrong decisions could l ...

javascripthtmlcsssyntaxpopup

Background image with a translucent overlay set at 50% opacity

Looking to add a new section on my website that I haven't attempted before. My goal is to have a section with a full width background image, but with a 50% opacity color overlay on the right side of the image. I came across an example image that demon ...

htmlcss

Allowing horizontal scrolling in a table cell set to full width

I'm attempting to achieve the desired outcome by utilizing the code provided at What I'd like to know is why the scrolling function isn't working as expected. Instead of scrolling, it simply expands the table. To see the difference, try run ...

htmlcsscss-tables

Creating a uniform system for PHP and CSS that eliminates the need for string parsing

I apologize for the insufficient title. In the given code snippet: <?php $css = 'foo-'.$data['style']; $html= "<table><tr><td class='{$css}>styled! /> </tr> </table>; ?> whe ...

phphtmlcss

Tips for choosing only certain CSS selector declarations

Although I am primarily a PHP developer, I recently encountered an issue while developing a Joomla component. When installing my component on different Joomla websites, it also inherits the CSS styles of the parent template, which is causing some unwanted ...

phpcssjoomlacustom-component

Tips on revealing div elements using a slide-down animation exclusively with JavaScript

I am looking to display a div with a slide-up effect using JavaScript (not jQuery) when clicked. Here is the HTML code I have: <div class="title-box"><a href="#">show text</a></div> <div class="box"><span class="activity- ...

javascripthtmlcss

Utilizing Radio buttons to Align Labels in Bootstrap 4

I'm experimenting with a Bootstrap 4 form and trying to get inline radio buttons with labels. It was working fine with Bootstrap 3, but I'm facing issues with Bootstrap 4 and its custom-radio styling. Desired Output: Gender : ( ) Male ( ) Female ...

htmlcsstwitter-bootstraptwitter-bootstrap-4

What is the mechanism behind the functionality of padding percentage?

HTML <div class='container'> <div class='boxContainer'> The text inside this box should be centered vertically </div> </div> CSS .container { position: relative; height: 300px; wid ...

htmlcss

What is the best way to make a hyperlink in HTML open in the same page or window, without relying on the <iframe> tag or JavaScript?

I have two html files and one css file. My question is how to open the link monday.html on the same page or window in my content section. For example, when someone clicks on the Monday navigation button, I want the result to show up in the content section ...

htmlcssiframe

What is the best method for adjusting height in MaterialUI components?

Is there a way to remove this white line from the image?view image here When I set the height to 100%, it appears like this:view image here ...

cssreactjsmaterial-uiheight

Update the header on the vis.js timeline for better visibility on the page

The updated library now includes fixed headers within the chart itself, which is a great improvement. However, we feel that it only solves half of the issue at hand. Customizing the headers is still a challenge, so I implemented a separate row to display ...

jqueryhtmlcsstimelinevis.js

The footer that constantly changes

I am looking to dynamically position my footer at the bottom of the page. The footer should be fixed at the bottom. If the page content exceeds the viewport, the footer should automatically adjust its position. html { position: relative; m ...

htmlcssfooter

How can JavaScript be used to apply CSS formatting to text that appears as a new HTML element?

It's unclear if the question accurately reflects what I want to achieve. If I have a form that fades out and is then determined whether to display again through a cookie, can the confirmation message be styled using CSS? For example, I would like to ...

javascriptjqueryhtmlcss