Consider the following snippet:
.parent {_x000D_
display: flex;_x000D_
flex-direction: column;_x000D_
width: 400px;_x000D_
border: 1px solid red;_x000D_
align-items: center;_x000D_
}_x000D_
.child {_x000D_
border: 1px solid blue;_x000D_
}
_x000D_
<div class="parent">_x000D_
<div class="child">_x000D_
Lorem Ipsum is simply dummy text of the printing and typesetting industry_x000D_
</div>_x000D_
<div class="child">_x000D_
Lorem Ipsum is simply dummy text of the printing and typesetting industry_x000D_
</div>_x000D_
</div>
_x000D_
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.
This question is related to
css
internet-explorer
flexbox
internet-explorer-11
.grandparent{
display: table;
}
.parent{
display: table-cell
vertical-align: middle
}
This worked for me.
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>
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 {_x000D_
display: flex;_x000D_
flex-direction: column;_x000D_
width: 400px;_x000D_
border: 1px solid red;_x000D_
/*align-items: center;*/_x000D_
}_x000D_
.child {_x000D_
border: 1px solid blue;_x000D_
}
_x000D_
<div class="parent">_x000D_
<div class="child">_x000D_
Lorem Ipsum is simply dummy text of the printing and typesetting industry_x000D_
</div>_x000D_
<div class="child">_x000D_
Lorem Ipsum is simply dummy text of the printing and typesetting industry_x000D_
</div>_x000D_
</div>
_x000D_
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;
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.
Why use a complicated solution if a simple one works too?
.child {
white-space: normal;
}
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;
}
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.
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.
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.
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.
I did not find my solution here, maybe someone will be useful:
.child-with-overflowed-text{
word-wrap: break-all;
}
Good luck!
Source: Stackoverflow.com