文本不在 flex IE10 中换行
Text not wrapping in flex IE10
.c-container {
background-color: coral;
display: flex;
margin: 0 auto;
width: 90%;
}
.c-column {
position: relative;
}
.c-column--left, .c-column--right {
flex: 0 0 auto;
width: 344px;
max-width: 344px;
min-width: 344px;
}
.c-column--left {
order: -1;
}
.c-column--center {
flex: 1 1 auto;
display: flex;
flex-direction: column;
background-color: #ff5213;
}
.c-topic__header, .c-topic__footer {
padding: 24px;
background-color: #e93f00;
}
.c-topic__body {
position: relative;
}
.c-message {
padding: 24px;
position: relative;
}
.c-message__list {
padding: 0;
position: relative;
display: flex;
flex-direction: column;
list-style: none;
}
.c-message__item {
background-color: skyblue;
border-radius: 3px;
border-bottom: 2px solid rgba(0, 0, 0, 0.2);
padding: 24px;
min-width: 0%;
margin-bottom: 5px;
flex: 1 1 auto;
}
.c-message__item--right {
align-self: flex-end;
margin-left: 10%;
}
.c-message__item--left {
align-self: flex-start;
margin-right: 10%;
}
.o-box {
padding: 24px;
}
.u-relative {
position: relative;
}
<div class='c-container'>
<div class='c-column c-column--center'>
<div class='c-topic__header'>
Header: flex-child
</div>
<div class='c-topic__body'>
<div class='c-message'>
<ul class='c-message__list'>
<li class='c-message__item c-message__item--right'>
Hi, I'm a message placed on the right side and I'm quite wide
</li>
<li class='c-message__item c-message__item--left'>
How swell. I'm on the left and a bit shorter.
</li>
</ul>
</div>
</div>
<div class='c-topic__footer'>
Footer: flex-child
</div>
</div>
<div class='c-column c-column--left'>
<div class='o-box u-relative'>
<span>Left column: 344px</span>
</div>
</div>
<div class='c-column c-column--right'>
<div class='o-box u-relative'>
<span>Right Column: 344px</span>
</div>
</div>
</div>
最近我一直致力于将 flexbox 实现到 webapp 界面中。一页由三栏组成,左右栏固定宽度,中间可灵活调整。
中心列依次由 3 个弯曲的子项组成。固定高度的页眉和页脚,具有灵活的中心。如果它包含的内容溢出,这个列中心(因此 CC)会得到一个垂直滚动条。
在 CC 内部,有一个带有填充的包装器。这是因为 javascript 不能很好地处理滚动,填充在 CC 项目本身上。
问题是在 IE10 中,当视口变小时,蓝色块内的文本不会换行。 Safari、Chrome 和 Firefox 都没有这个问题。有谁知道如何让 IE10 像其他浏览器一样运行?
问题示例可在此处找到:
http://codepen.io/csssavvy/pen/qOgjmN
Tl;博士。 IE10 flexbox 文本溢出不起作用。需要帮忙。代码示例:http://codepen.io/csssavvy/pen/qOgjmN
感谢您的回答。今天下午解决了这个问题:
关于 .c-message__item 的更改:
添加 max-width: 90%;
删除 min-width: 0%;
。
.c-column--center 的变化:
添加 min-width: 0%;
查看更新版本的codepen:codepen。io/csssavvy/pen/qOgjmN
.c-container {
background-color: coral;
display: flex;
margin: 0 auto;
width: 90%;
}
.c-column {
position: relative;
}
.c-column--left, .c-column--right {
flex: 0 0 auto;
width: 344px;
max-width: 344px;
min-width: 344px;
}
.c-column--left {
order: -1;
}
.c-column--center {
flex: 1 1 auto;
display: flex;
flex-direction: column;
background-color: #ff5213;
}
.c-topic__header, .c-topic__footer {
padding: 24px;
background-color: #e93f00;
}
.c-topic__body {
position: relative;
}
.c-message {
padding: 24px;
position: relative;
}
.c-message__list {
padding: 0;
position: relative;
display: flex;
flex-direction: column;
list-style: none;
}
.c-message__item {
background-color: skyblue;
border-radius: 3px;
border-bottom: 2px solid rgba(0, 0, 0, 0.2);
padding: 24px;
min-width: 0%;
margin-bottom: 5px;
flex: 1 1 auto;
}
.c-message__item--right {
align-self: flex-end;
margin-left: 10%;
}
.c-message__item--left {
align-self: flex-start;
margin-right: 10%;
}
.o-box {
padding: 24px;
}
.u-relative {
position: relative;
}
<div class='c-container'>
<div class='c-column c-column--center'>
<div class='c-topic__header'>
Header: flex-child
</div>
<div class='c-topic__body'>
<div class='c-message'>
<ul class='c-message__list'>
<li class='c-message__item c-message__item--right'>
Hi, I'm a message placed on the right side and I'm quite wide
</li>
<li class='c-message__item c-message__item--left'>
How swell. I'm on the left and a bit shorter.
</li>
</ul>
</div>
</div>
<div class='c-topic__footer'>
Footer: flex-child
</div>
</div>
<div class='c-column c-column--left'>
<div class='o-box u-relative'>
<span>Left column: 344px</span>
</div>
</div>
<div class='c-column c-column--right'>
<div class='o-box u-relative'>
<span>Right Column: 344px</span>
</div>
</div>
</div>
最近我一直致力于将 flexbox 实现到 webapp 界面中。一页由三栏组成,左右栏固定宽度,中间可灵活调整。
中心列依次由 3 个弯曲的子项组成。固定高度的页眉和页脚,具有灵活的中心。如果它包含的内容溢出,这个列中心(因此 CC)会得到一个垂直滚动条。
在 CC 内部,有一个带有填充的包装器。这是因为 javascript 不能很好地处理滚动,填充在 CC 项目本身上。
问题是在 IE10 中,当视口变小时,蓝色块内的文本不会换行。 Safari、Chrome 和 Firefox 都没有这个问题。有谁知道如何让 IE10 像其他浏览器一样运行?
问题示例可在此处找到: http://codepen.io/csssavvy/pen/qOgjmN
Tl;博士。 IE10 flexbox 文本溢出不起作用。需要帮忙。代码示例:http://codepen.io/csssavvy/pen/qOgjmN
感谢您的回答。今天下午解决了这个问题:
关于 .c-message__item 的更改:
添加 max-width: 90%;
删除 min-width: 0%;
。
.c-column--center 的变化:
添加 min-width: 0%;
查看更新版本的codepen:codepen。io/csssavvy/pen/qOgjmN