Word wrap not working on flex item in internet explorer

Question

In the following code I have a flex row container with a nested flex column container. In the flex column container it seems as though word wrap does not work.

.profile-header {
  padding-bottom: 20px;
}

.profile-header-container {
  display: flex;
  justify-content: center;
  border: 1px solid purple;
}

.picture {
  height: 175px;
  width: 175px;
  background-color: orange;
  flex-shrink: 0;
}

.info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.name {
  font-size: 24px;
  border: 1px solid red;
}

.button {
  height: 50px;
  width: 150px;
  background-color: blue;
}

<div class="profile-header">
  <div class="profile-header-container">
    <div class="picture">
      
    </div>
    <div class="info">
      <div class="name">
        reallylongfirstname reallylonglastname
      </div>
      <div class="button">
        
      </div>
    </div>
  </div>
</div>

The .name element doesn't seem to want to word wrap in internet explorer, where it seems to work fine in chrome. I checked flex bugs, specifically, bug #2, but setting max-width: 100% didn't seem to work. Is there a way I can make this work?

jsfiddle

score 1 · Accepted Answer · answered Jan 21 '17 at 17:51

You can use CSS table to achieve the same layout.

.profile-header {
  border: 1px solid green;
}
.profile-header-container {
  display: table;
  margin: 0 auto;
  border: 1px solid purple;
}
.picture,
.info {
  display: table-cell;
  vertical-align: middle;
}
.picture {
  display: block;
  height: 175px;
  width: 175px;
  background-color: orange;
}
.info {
  text-align: center;
}
.name {
  font-size: 24px;
  border: 1px solid red;
}
.button {
  display: block;
  height: 50px;
  width: 150px;
  margin: 0 auto;
  background-color: blue;
}

<div class="profile-header">
  <div class="profile-header-container">
    <div class="picture"></div>
    <div class="info">
      <div class="name">
        reallyrealylongfirstname reallyreallylonglastname
      </div>
      <div class="button"></div>
    </div>
  </div>
</div>

jsFiddle

Thanks for your answer. It seems like it works. However, in doing some reading I came across different opinions about not using tables for layout. Obviously if this solves my problem I will use it, but do you care to comment about the negative opinion of tables used for layouts? — user4584963, Jan 21 '17 at 19:30
@user4584963 Those opinions are saying not to use html for layout not css table I believe. Consider flexbox is an advanced version of css table in many ways, and it's still being developed and kind of buggy. — Stickers, Jan 21 '17 at 20:18

score 1 · Answer 2 · edited May 23 '17 at 10:29

1

Flex layout in Internet Explorer is known to have several bugs.

A text wrapping problem is detailed here: Why IE11 doesn't wrap the text in flexbox?

The text wrapping problem in IE is often solved by defining a width at the right place or places.

In this particular case, defining widths for the text element and the parent seems to fix the problem.

Add this to your code:

.info { width: 50%; }

.name { width: 100%; }

revised fiddle

edited May 23 '17 at 10:29

Community

1
1

answered Jan 21 '17 at 23:00

Michael Benjamin

346,931
104
581
701

Can you think of a way that I can make it so the `.name` element only takes up what it needs to so I don't have to set the width to always be 50%? Sometimes the names will be short and I need the `.info` div to always be centered. – user4584963 Jan 22 '17 at 03:28
Looks like I can accomplish this by adding `display: flex` and `justify-content: center` to `.profile-header`. Then I can set `.info { width: 100% }`. – user4584963 Jan 22 '17 at 03:54
Was playing with it for a while. No easy fix for IE11 that I can see. Maybe consider ellipsis instead of wrap? Tested and works in IE11. http://jsfiddle.net/Lhkg2wwe/5/ – Michael Benjamin Jan 22 '17 at 04:03

Word wrap not working on flex item in internet explorer

2 Answers2