为什么以像素指定的 div 宽度变小了？

Question

我有三个 div 占据了容器的整个宽度。左右div（应该）有一个固定的宽度，像300px。主要 div 应该占据剩余的 space。但是，如果主要 div 中的文本增加，它会以其他两个 div 变得小于 300 像素的方式增长。

CSS

.container {
    display:flex;
}
.main {
  background:#CCC;
    width:auto;
}
.left {
  background:#8F8;
    width:300px;
}
.right {
    background:#F80;
    width:300px;
}

HTML

<div class='container'>
  <div class='left'>
  Left
  </div>
  <div class='main'>
  Main with long enough text to occupy more than a line, and a few more just to be sure.
  </div>
  <div class='right'>
  Right
  </div>
</div>

JSFiddle：https://jsfiddle.net/zLLnbo0u/

去掉右边的div或者正文就可以看出问题了：左边的div自动变大（变回300像素）。如何让左右 div 精确到 300 像素，而主要 div 占据剩余的 space，而不考虑文本长度？

Answer 1

flex-shrink 属性指定弹性项目的弹性收缩系数，并确定弹性项目相对于弹性容器中其余弹性项目收缩的程度够了 space.

它的默认值是1，如果你省略它，这意味着所有项目都会平等地收缩。

因此，如果您将 flex-shrink: 0; 添加到 left/right，它们将保持其宽度，因为值 0 意味着它们不允许收缩到全部.

Updated fiddle

堆栈片段

.container {
 display:flex;
}
.main {
  background:#CCC;
 width:auto;
}
.left {
  flex-shrink: 0;
  background:#8F8;
 width:300px;
}
.right {
  flex-shrink: 0;
 background:#F80;
 width:300px;
}

<div class='container'>
  <div class='left'>
  Left
  </div>
  <div class='main'>
  Main with long enough text to occupy more than a line, and a few more just to be sure.
  </div>
  <div class='right'>
  Right
  </div>
</div>

为什么以像素指定的 div 宽度变小了？

Why a div width specified in pixels is becoming smaller?

html

css

precision

flexbox