使用flex-parent会破坏单项Flex布局

Posted 2021-04-21

进一步扩大这个最近的问题：

When using `nowrap` within a flex row, avoid pushing the last elements off the screen

我很难理解为什么有一个flex父 - 破坏了引用问题中建议的其他完美布局。

预期的行为：文本将被剪切，为远方的表情符号提供空间。没有水平滚动。

请尝试打开和关闭flex属性以了解行为。

此外，请注意理解包装柔性为何会破坏布局，这是我在这个问题中的主要目标。所以解决它是不够的。

有没有办法解决这种行为没有奇怪的解决方案，如flex-direction: column？

body {
  margin: 0;
}

.single-flex {
  display: flex;
  justify-content: space-between;
}

span {
  white-space: nowrap;
  overflow: hidden;
}

.icon {
  flex: 0 0 auto;
}

<div style="display:flex">
  <div class="single-flex">
    <span>hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello </span>
    <span class="icon">
以上是关于使用flex-parent会破坏单项Flex布局的主要内容，如果未能解决你的问题，请参考以下文章
 
 Flex 布局参数分析
 fieldset 在 angularjs-material 中破坏了我的 flex 布局
 解决flex布局导致子元素的宽度无效的问题
 带有水平滚动条的 pre/code 元素破坏了 Firefox 上的 flex 布局
 Microsoft Edge 浏览器破坏了嵌套的 flex 子项
 过滤器是不是会破坏 Flex 4.5 皮肤中的 colorizeExclusions，如果是，是不是有解决方法？