Text in a flex container doesn't wrap in IE11
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%
. CSS wrap text not working in IE
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.
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.