CSS: flex-basis px not working as described

Question

According to the documentation, flex-basis: 200px should set the initial size of the item to 200 pixels. However, I find that the initial size is some value between 160 and 170 that seems to depend on the browser, window width (even when it's wider than 200 pixels), and even the amount of margin on the other flexbox items.

<main style="display:flex">
  <div style="flex-basis: 200px; background-color: #eee"></div>
  <div style="flex-basis: 100%;  background-color: #ccc"></div>
</main>

<style>
  main, html, body {
    position:absolute; top:0; left:0; right:0; bottom:0;
    margin: 0;
  }
</style>

<script>
  for (div of document.getElementsByTagName("div"))
    div.innerHTML = "WIDTH=" + div.offsetWidth;
</script>

Is there a reliable way to set the initial width of a flexbox item in pixels (assuming there is enough space for that many pixels)?

@Arleigh Interesting. `flex-shrink` indeed seems to follow that formula. Is the formula documented somewhere? In any case the point is that `flex-shrink` defaults to 1 and shrinks the items on the main axis. So my misunderstanding was about the meaning of "initial". I thought it meant before a user or script changed it, while it actually meant before `flex-shrink` and `flex-grow` are applied. — personal_cloud, Dec 12 '22 at 04:14

ksav · Accepted Answer · 2022-12-12T04:37:23.427

If you add flex-shrink:0; this should work as you expect. (If flex-shrink is not explicitly set, the initial value is 1).

<main style="display:flex">
  <div style="flex-basis: 200px; flex-shrink:0; background-color: #eee"></div>
  <div style="flex-basis: 100%;  background-color: #ccc"></div>
</main>

<style>
  main, html, body {
    position:absolute; top:0; left:0; right:0; bottom:0;
    margin: 0;
  }
</style>

<script>
  for (div of document.getElementsByTagName("div"))
    div.innerHTML = "WIDTH=" + div.offsetWidth;
</script>

Arleigh Hix · Answer 2 · 2022-12-12T04:54:07.843

Your flex-basis values should be the same ratio that you want them displayed at widths smaller than the total. If you want one element to grow and fill the space give it flex-grow: 1;. For more info go here: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax
Below, the elements' widths will be 1:2 up to a total width of 600px then the second element will fill the extra space above that:

<main style="display:flex">
  <div style="flex-basis: 200px; background-color: #eee"></div>
  <div style="flex-basis: 400px; flex-grow: 1; background-color: #ccc"></div>
</main>

<style>
  main, html, body {
    position:absolute; top:0; left:0; right:0; bottom:0;
    margin: 0;
  }
</style>

<script>
  for (div of document.getElementsByTagName("div"))
    div.innerHTML = "WIDTH=" + div.offsetWidth;
</script>

CSS: flex-basis px not working as described

2 Answers2