防止伸缩物品收缩

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

您还可以使用flex-shrink：0; 在#right元素上以防止其缩小。

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

有关flex的更多信息，有很多不错的文章，例如css-tricks

Answer 2

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

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

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

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

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

柔性：<positive-number>

相当于 flex: 1 0。使 Flex 项目变得灵活并将 Flex 基础设置为零，从而使项目接收 Flex 容器中指定比例的可用空间。如果弹性容器中的所有项目都使用此模式，则它们的大小将与指定的弹性系数成比例。

来源