Flex 项目被其自身的边距压扁

Question

我有一个弹性容器，其中有一个子容器和靠近它的展开的文本。

子项是一个具有明确宽度和高度的方形框，以及将其与文本分开的侧边距。

当文本太长而无法适应容器的宽度并换行时，框的宽度会稍微缩小，而其边距保持适当的值。

div {
  display: flex;
  border: 1px solid #D0D0D0;
  width: 200px;
}

span {
  width: 1em; /* both width and flex-basis yield same results */
  height: 1em;
  margin-right: 1em;
  background-color: black;
}

<div>
  <span></span> 
  box behaves normally
</div>

<div>
  <span></span> 
  box's width shrinks near a text which doesn't fit parent's width
</div>

谁能解释一下盒子为什么会缩小？

Answer 1

添加flex-shrink: 0到span，因为问题是该项目默认具有flex-shrink: 1，这意味着当行上没有\xe2\x80\x99t足够的空间时，它确定 Flex 项目相对于 Flex 容器中的其余 Flex 项目将收缩多少。

\n\n

\r\n

\r\n

div {\r\n  display: flex;\r\n  border: 1px solid #D0D0D0;\r\n  width: 200px;\r\n}\r\n\r\nspan {\r\n  width: 1em;  /* both width and flex-basis yield same results */\r\n  height: 1em;\r\n  margin-right: 1em;\r\n  background-color: black;\r\n  flex-shrink: 0\r\n}

\r\n

<div>\r\n  <span></span>\r\n  box behaves normally\r\n</div>\r\n\r\n<div>\r\n  <span></span>\r\n  box\'s width shrinks near a text which doesn\'t fit parent\'s width\r\n</div>

\r\n

\r\n

\r\n

\n