防止柔性物品收缩

Question

示例：

#wrap {
  outline: 1px solid fuchsia;
  display: flex;
}

#left {
  background: tan;
  width: 100%;
}

#right {
  background: teal;
  width: 50px;
  height: 50px;
}

<div id="wrap">
  <div id="left"></div>
  <div id="right"></div>
</div>

截图：

问题：

1. 当我使用浏览器元素检查器时，我看到右侧框的宽度小于50px，尽管它在CSS中具有固定的宽度。为什么它基本上发生了？
2. 如何预防？

Answer 1

你也可以在#right元素上使用 flex-shrink：0; 来防止它缩小。

这只是定义了#right元素不应该被允许缩小，例如保持在50px。

关于flex的更多信息，有许多好文章，例如在css-tricks

Answer 2

在flex: 1 1;上使用#left代替width:100%

＆＃13;

＆＃13;

#wrap {
  outline: 1px solid fuchsia;
  display: flex;
}

#left {
  background: tan;
  flex: 1 1;
}

#right {
  background: teal;
  width: 50px;
  height: 50px;
}

＆＃13;

<div id="wrap">
  <div id="left"></div>
  <div id="right"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

  

flex：<positive-number>

     

相当于flex：1 0。   使弹性项目具有灵活性，并将弹性基础设置为零，   导致一个项目收到指定比例的   flex容器中的可用空间。如果是flex容器中的所有项目   使用这种模式，它们的大小将与指定的成比例   flex因子。

<强> Source