CSS: flex-basis px 没有像描述的那样工作答案

【问题标题】：CSS: flex-basis px not working as describedCSS: flex-basis px 没有像描述的那样工作
【发布时间】：2022-12-12 12:12:27
【问题描述】：

根据documentation，flex-basis: 200px 应该将项目的初始大小设置为 200 像素。但是，我发现初始大小是 160 到 170 之间的某个值，这似乎取决于浏览器、窗口宽度（即使宽度超过 200 像素），甚至其他 flexbox 项目的边距量。

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

有没有一种可靠的方法来设置 flexbox 项目的初始宽度（以像素为单位）（假设有足够的空间容纳那么多像素）？

【问题讨论】：

标签： css flexbox

【解决方案1】：

如果您添加flex-shrink:0;，这应该会如您所愿

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

【讨论】：