flex-basis设置像素值未按预期生效，如何可靠定义Flex项初始宽度？

云原生阿岚

2026-8-8

问题描述

按照CSS规范，flex-basis: 200px 应该将Flex项的初始宽度设置为200像素，但实际测试中，该元素的初始宽度却在160-170像素之间，且这个值会受浏览器、窗口宽度（即使窗口远大于200px）以及其他Flex项样式的影响。测试代码如下：

<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>

请问在空间充足的前提下，有没有可靠方法设置Flex项的初始像素宽度？

解决方案

问题核心是第二个Flex项的 flex-basis: 100% 会抢占容器可用空间，再加上第一个项默认开启的 flex-shrink: 1（允许缩小），导致它被挤压变窄。要实现稳定的初始宽度，可采用以下几种方法：

禁止Flex项缩小：给需要固定宽度的项添加 flex-shrink: 0，阻止它在空间被抢占时自动缩小，这是最直接的修复方式：
```
<div style="flex-basis: 200px; flex-shrink: 0; background-color: #eee"></div>
```
直接使用width属性：在Flex布局中，当flex-basis为默认的auto时，元素宽度由width属性决定，配合flex-shrink: 0可确保宽度稳定：
```
<div style="width: 200px; flex-shrink: 0; background-color: #eee"></div>
```
规范自适应项的写法：把第二个自适应项的flex-basis设为0，同时设置flex-grow: 1，让它只占据容器剩余空间，不会挤压前面的固定宽度项。这是Flex布局中“固定+自适应”的标准写法：
```
<main style="display:flex">
  <div style="flex-basis: 200px; flex-shrink: 0; background-color: #eee"></div>
  <div style="flex-basis: 0; flex-grow: 1; background-color: #ccc"></div>
</main>
```