防止弹性物品缩水 [英] Prevent flex item from shrinking

问题描述

#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. 如何预防?

1. When I use the browser element inspector, I see the right box is less than 50px wide although it has a fixed width in the CSS. Why does it basically happen?
2. How can it be prevented?

推荐答案

您还可以在#right元素上使用 flex-shrink:0; 来防止其收缩.

You can also use flex-shrink: 0; on the #right element to prevent it from shrinking.

这只是定义了#right元素不应收缩，例如保持在50像素.

This just defines that the #right element should not be allowed to shrink e.g. stays at 50px.

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

For more informations about flex there are many good articles e.g. on css-tricks

这篇关于防止弹性物品缩水的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！