如何防止动态宽度flexbox子级溢出父级？ [英] How to prevent a dynamic width flexbox child from overflowing the parent?

问题描述

在下面的示例中，我想阻止拉伸的子项溢出父项。我不想为它指定宽度。如何才能做到这一点？

＃flex-parent {display：flex;宽度：200px;背景：绿色;填充：10px; }＃fixed-child {width：20;背景：红色}＃拉伸小孩{背景：黄色; word-wrap：break-word}

< div id = 柔性父 > < div id =fixed-child> FIXED< / div> < div id =stretch-child> STREEEEEEEEEEEEEEEEEEEEEECHED< / div>< / div>

解决方法

您点击 min-width算法，其中flex项目的 min-width 默认为 auto ，因此不允许它缩小到其内容以下。

您可以使用 word -break：break-all

＃flex-parent {display：flex;宽度：200px;背景：绿色; padding：10px;}＃fixed-child {width：20;背景：红色}＃拉伸小孩{背景：黄色;单词包装：分词; word-break：break-all;}

< div ID = 柔性父 > < div id =fixed-child> FIXED< / div> < div id =stretch-child> STREEEEEEEEEEEEEEEEEEEEEECHED< / div>< / div>


$ b

---

或者 min-width：0 允许它小于它的内容

<

＃flex-parent {display：flex;宽度：200px;背景：绿色; padding：10px;}＃fixed-child {width：20;背景：红色}＃拉伸小孩{背景：黄色;单词包装：分词; min-width：0;}

< div id = 柔性父> < div id =fixed-child> FIXED< / div> < div id =stretch-child> STREEEEEEEEEEEEEEEEEEEEEECHED< / div>< / div>


$ b

---

经过快速浏览器测试（Windows 10上的Chrome / Firefox / Edge / IE）后，IE看起来需要 word-break：break-all 或隐藏溢出

In the sample below, I want to prevent the streched child from overflowing the parent. I do not want to specify a width for it. How can I accomplish that?

#flex-parent { display: flex; width: 200px; background: green; padding: 10px; }
#fixed-child { width: 20; background: red }
#stretched-child { background: yellow; word-wrap: break-word }

<div id="flex-parent">
  <div id="fixed-child">
FIXED
  </div>
  <div id="stretched-child">
  STREEEEEEEEEEEEEEEEEEEEEEEEEEEECHED
  </div>
</div>

解决方案

You hit the min-width algorithm, where the min-width of a flex item defaults to auto and as such doesn't allow it to shrink below its content.

You can use word-break: break-all

#flex-parent {
  display: flex;
  width: 200px;
  background: green;
  padding: 10px;
}

#fixed-child {
  width: 20;
  background: red
}

#stretched-child {
  background: yellow;
  word-wrap: break-word;
  word-break: break-all;
}

<div id="flex-parent">
  <div id="fixed-child">
    FIXED
  </div>
  <div id="stretched-child">
    STREEEEEEEEEEEEEEEEEEEEEEEEEEEECHED
  </div>
</div>

---

Or min-width: 0 to allow it to be smaller than its content

#flex-parent {
  display: flex;
  width: 200px;
  background: green;
  padding: 10px;
}

#fixed-child {
  width: 20;
  background: red
}

#stretched-child {
  background: yellow;
  word-wrap: break-word;
  min-width: 0;
}

<div id="flex-parent">
  <div id="fixed-child">
    FIXED
  </div>
  <div id="stretched-child">
    STREEEEEEEEEEEEEEEEEEEEEEEEEEEECHED
  </div>
</div>

---

After a quick cross browser test (Chrome/Firefox/Edge/IE on Windows 10), it appears IE need either the word-break: break-all or overflow hidden

这篇关于如何防止动态宽度flexbox子级溢出父级？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！