Text in a flex container doesn't wrap in IE11
CssInternet ExplorerFlexboxInternet Explorer-11Css Problem Overview
Consider the following snippet:
.parent {
display: flex;
flex-direction: column;
width: 400px;
border: 1px solid red;
align-items: center;
}
.child {
border: 1px solid blue;
}
<div class="parent">
<div class="child">
Lorem Ipsum is simply dummy text of the printing and typesetting industry
</div>
<div class="child">
Lorem Ipsum is simply dummy text of the printing and typesetting industry
</div>
</div>
In Chrome, the text is wrapping as expected:
But, in IE11, the text is not wrapping:
Is this a known bug in IE? (if yes, a pointer will be appreciated)
Is there a known workaround?
This similar question doesn't have a definite answer and an official pointer.
Css Solutions
Solution 1 - Css
Add this to your code:
.child { width: 100%; }
We know that a block-level child is supposed to occupy the full width of the parent.
Chrome understands this.
IE11, for whatever reason, wants an explicit request.
Using flex-basis: 100%
or flex: 1
also works.
.parent {
display: flex;
flex-direction: column;
width: 400px;
border: 1px solid red;
align-items: center;
}
.child {
border: 1px solid blue;
width: calc(100% - 2px); /* NEW; used calc to adjust for parent borders */
}
<div class="parent">
<div class="child">
Lorem Ipsum is simply dummy text of the printing and typesetting industry
</div>
<div class="child">
Lorem Ipsum is simply dummy text of the printing and typesetting industry
</div>
</div>
Note: Sometimes it will be necessary to sort through the various levels of the HTML structure to pinpoint which container gets the width: 100%
. https://stackoverflow.com/q/42025810/3597276
Solution 2 - Css
I had the same issue and the point is that the element was not adapting its width to the container.
Instead of using width:100%
, be consistent (don't mix the floating model and the flex model) and use flex by adding this:
.child { align-self: stretch; }
Or:
.parent { align-items: stretch; }
This worked for me.
Solution 3 - Css
As Tyler has suggested in one of the comments here, using
max-width: 100%;
on the child may work (worked for me). Using align-self: stretch
only works if you aren't using align-items: center
(which I did). width: 100%
only works if you haven't multiple childs inside your flexbox which you want to show side by side.
Solution 4 - Css
Hi for me I had to apply the 100% width to its grandparent element. Not its child element(s).
.grandparent {
float:left;
clear: both;
width:100%; //fix for IE11 text overflow
}
.parent {
display: flex;
border: 1px solid red;
align-items: center;
}
.child {
border: 1px solid blue;
}
Solution 5 - Css
Somehow all these solutions didn't work for me. There is clearly an IE bug in flex-direction:column
.
I only got it working after removing flex-direction
:
flex-wrap: wrap;
align-items: center;
align-content: center;
Solution 6 - Css
The easiest solution I've found is just adding max-width: 100% to the element that's going out of bounds. If you're using it on something like a carousel remember to add a class with the max-width attribute.
Solution 7 - Css
.grandparent{
display: table;
}
.parent{
display: table-cell
vertical-align: middle
}
This worked for me.
Solution 8 - Css
The proposed solutions did not help me with ".child {width: 100%;}", since I had more complicated markup. However, I found a solution - remove "align-items: center;", and it works for this case too.
.parent {
display: flex;
flex-direction: column;
width: 400px;
border: 1px solid red;
/*align-items: center;*/
}
.child {
border: 1px solid blue;
}
<div class="parent">
<div class="child">
Lorem Ipsum is simply dummy text of the printing and typesetting industry
</div>
<div class="child">
Lorem Ipsum is simply dummy text of the printing and typesetting industry
</div>
</div>
Solution 9 - Css
The only way I have 100% consistently been able to avoid this flex-direction column bug is to use a min-width media query to assign a max-width to the child element on desktop sized screens.
.parent {
display: flex;
flex-direction: column;
}
//a media query targeting desktop sort of sized screens
@media screen and (min-width: 980px) {
.child {
display: block;
max-width: 500px;//maximimum width of the element on a desktop sized screen
}
}
You will need to set naturally inline child elements (eg. <span>
or <a>
) to something other than inline (mainly display:block or display:inline-block) for the fix to work.
Solution 10 - Css
Me too I encountered this issue.
The only alternative is to define a width (or max-width) in the child elements. IE 11 is a bit stupid, and me I just spent 20 minutes to realize this solution.
.parent {
display: flex;
flex-direction: column;
width: 800px;
border: 1px solid red;
align-items: center;
}
.child {
border: 1px solid blue;
max-width: 800px;
@media (max-width:960px){ // <--- Here we go. The text won't wrap ? we will make it break !
max-width: 600px;
}
@media (max-width:600px){
max-width: 400px;
}
@media (max-width:400px){
max-width: 150px;
}
}
<div class="parent">
<div class="child">
Lorem Ipsum is simply dummy text of the printing and typesetting industry
</div>
<div class="child">
Lorem Ipsum is simply dummy text of the printing and typesetting industry
</div>
</div>
Solution 11 - Css
I did not find my solution here, maybe someone will be useful:
.child-with-overflowed-text{
word-wrap: break-all;
}
Good luck!
Solution 12 - Css
I had a similar issue with overflowing images in a flex wrapper.
Adding either flex-basis: 100%;
or flex: 1;
to the overflowing child fixed worked for me.
Solution 13 - Css
Why use a complicated solution if a simple one works too?
.child {
white-space: normal;
}