我遇到的问题涉及
我有一些数量不定的flex子元素,每个子元素的宽度都不确定。每个子元素都有任意动态生成的内容。但是,其中一些内容必须具有文本换行的能力。
flex容器本身必须具有100%的宽度,并且必须能够包裹其子元素(即
假设存在三个flex子元素,最后一个需要文本换行:
CSS可以定义如下:
当窗口足够宽时,每个flex-child应该并排显示,文本不会折叠:
当窗口水平缩小时,右侧框中的文本应开始断行:
当文本无法再断成更多行时,flex-boxes本身应开始换行:
这在大多数现代浏览器中都很好用,但是在IE11上却不行。在IE11中,当改变屏幕尺寸时,文本可以正确换行,但flex子元素却无法换行。由于flex子元素无法换行,它们的内容会溢出到彼此之间:
将flex基础设置为
我看到的大多数解决方案需要固定长度的 flex-children,但我无法使用它们,因为它们是动态生成的。我故意没有使用
我还应该说,我只需要在最新的浏览器上工作(技术上只需要在某些版本的 Chrome 和 IE11 上工作,但其他浏览器和版本也能工作是一个加分项)。
这里有一个 代码片段 全面展示了问题(在 IE11 和 Chrome 中查看以查看差异)。
有人有什么想法来解决这个问题吗?
记住,要求如下:
他的解决方案在技术上修复了我在这里提出的问题,但我忘记提到另一个要求:
在这种情况下,第三个 flex-child 中第二个 div 中的文本溢出其容器,并且文本开始过早换行。
可以在 此处 查看显示几乎正常的解决方案的 CodePen(请注意,因为它在 Chrome 上引起了进一步问题,所以删除了
更新 2: 我认为我之前没有表述清楚:任何一个或全部 flex-children 都可能具有可换行文本。这完全取决于动态生成的内容。在我给出的示例中,只有第三个 flex-child 具有可换行文本,但情况并非总是如此。
flex-basis:0%
以及IE11在用户缩小窗口宽度时如何处理它。这可能与box-sizing的错误有关。我有一些数量不定的flex子元素,每个子元素的宽度都不确定。每个子元素都有任意动态生成的内容。但是,其中一些内容必须具有文本换行的能力。
flex容器本身必须具有100%的宽度,并且必须能够包裹其子元素(即
flex-wrap:wrap
)。假设存在三个flex子元素,最后一个需要文本换行:
<div class="flex-container">
<div class="flex-child">
<div>This text should not overlay other flex-children.</div>
</div>
<div class="flex-child">
<div>This text should not overlay other flex-children.</div>
</div>
<div class="flex-child">
<div class="text-break">This text should break on new lines when the container shrinks down</div>
</div>
</div>
CSS可以定义如下:
.flex-container {
display: flex;
flex-wrap: wrap;
width: 100%;
}
.flex-child {
flex-grow: 1;
flex-shrink: 0;
flex-basis: 0%;
white-space: nowrap;
padding: 5px;
}
.text-break {
white-space: pre-wrap;
}
当窗口足够宽时,每个flex-child应该并排显示,文本不会折叠:
![正确展示-最大宽度窗口](https://istack.dev59.com/8BLbl.webp)
![正确展示-中等宽度窗口](https://istack.dev59.com/HV89d.webp)
![正确展示-最小宽度窗口](https://istack.dev59.com/KeJj6.webp)
![Incorrect IE11 Display - flex-basis: 0%](https://istack.dev59.com/LaaHn.webp)
flex-basis: auto;
则产生相反的效果:文本不会换行,但flex子元素会换行,而且没有内容溢出(在此截图中,绿色框中的文本应该断行,而不是flex-box换行):
![Incorrect IE11 Display - flex-basis: auto](https://istack.dev59.com/n6atr.webp)
flex
快捷属性,因为它与其他不相关的问题有关。这个答案 建议使用 _:-ms-fullscreen, :root .IE11-only-class { /* IE11 特定属性 */ }
,如果我能解决换行问题,可能会起作用,但我无法解决这个问题。我还应该说,我只需要在最新的浏览器上工作(技术上只需要在某些版本的 Chrome 和 IE11 上工作,但其他浏览器和版本也能工作是一个加分项)。
这里有一个 代码片段 全面展示了问题(在 IE11 和 Chrome 中查看以查看差异)。
有人有什么想法来解决这个问题吗?
记住,要求如下:
- 未知数量的宽度未指定的 flex 子元素
- 某些文本必须在 flex 盒子换行之前换行
- 一旦文本无法再换行,flex 子元素必须换行
- Chrome(我使用的是 59.0.3071.109)和 IE11(我使用的是 11.0.9600.18816CO)应该以相同的方式运行。
- 首选 CSS-only 解决方案
谢谢。
更新:
我的一个同事建议为不包含可换行文本的 flex 子元素使用单独的类。以下是他使用的 HTML 和 CSS:
<!--HTML-->
<div class="flex-container">
<div class="flex-child child-1">
<div>This text should not overlay other flex-children.</div>
</div>
<div class="flex-child flex-child-without-textwrap child-2">
<div>This text should not overlay other flex-children.</div>
</div>
<div class="flex-child flex-child-with-textwrap child-3">
<div class="text-break">This text should break on new lines when the container shrinks down</div>
</div>
</div>
和
/*CSS*/
.flex-container {
display: flex;
flex-wrap: wrap;
}
.flex-child {
flex-grow: 1;
flex-shrink: 1;
padding: 5px;
white-space: nowrap;
}
.flex-child-without-textwrap {
flex-basis: auto;
}
.flex-child-with-textwrap {
min-width: 200px;
flex-basis: 0%;
}
.text-break {
white-space: pre-wrap;
}
他的解决方案在技术上修复了我在这里提出的问题,但我忘记提到另一个要求:
- 在 flex-child 中,可以包含任何可换行文本和不可换行文本的组合
当将第三个 flex-child 更改为以下内容时,他的解决方案失败了:
<div class="flex-child flex-child-with-textwrap child-3">
<div class="text-break">This text should break on new lines when the container shrinks down</div>
<div>This text should not break on new lines</div>
</div>
在这种情况下,第三个 flex-child 中第二个 div 中的文本溢出其容器,并且文本开始过早换行。
可以在 此处 查看显示几乎正常的解决方案的 CodePen(请注意,因为它在 Chrome 上引起了进一步问题,所以删除了
min-width
)。更新 2: 我认为我之前没有表述清楚:任何一个或全部 flex-children 都可能具有可换行文本。这完全取决于动态生成的内容。在我给出的示例中,只有第三个 flex-child 具有可换行文本,但情况并非总是如此。
flex-basis
的值。但是,0%
意味着它们不会被计算到布局流中,这就是为什么 IE 看起来像那样的原因。尝试使用flex-basis:auto;
并添加一些特定更改项目大小比例的媒体查询。您还可以尝试将flex-wrap
添加到flex-child
div 中。 - Alex Wflex-basis: auto
是不起作用的,因为它会停止文本换行,而我不能使用大小比例,因为每个元素都应该适合其内容(现在听起来很棒的是flex-basis: content
)。就我所知,flex-wrap
只影响 flex 容器(即具有display: flex
的容器)。 - Jonathan