CODEWITHSUNDEEP
cssflexboxinternet-explorer-11internet-explorer-10
Gabriel Smoljar
Gabriel Smoljar

Reputation: 1236

flex-shrink won't shrink item in IE 10/11 and causes parent to be wider than parent

My layout consists of a single row with three columns.

Left and right should be as wide as their content. The rest of the width should be occupied by the title column. The total width of all columns should never be wider than the parent.

All columns should only have a single line of content, no line breaks.

If the content of the title column doesn't fit within the constraints an ellipsis character should be added at the end.

All this works in Chrome and Edge but IE refuse to shrink the title column so the columns fit within their parent's width.

html,
body {
  width: 100%;
  margin: 0;
}

.row {
  display: -ms-flexbox;
  display: flex;
  /* https://css-tricks.com/snippets/css/a-guide-to-flexbox/ */
  width: 200px;
}

[class*='cell-'] {
  -ms-flex: 0 0 auto;
      flex: 0 0 auto;
  /* https://css-tricks.com/flexbox-truncated-text/ */
  min-width: 0;
}

.cell-left {
  background: red;
}

.cell-title {
  white-space: nowrap;
  -ms-flex: 0 1 auto;
      flex: 0 1 auto;
}

.hover {
  overflow-x: hidden;
  text-overflow: ellipsis;
  position: relative;
  padding-right: 1em;
}

.chevron {
  position: absolute;
  right: 0;
}

.hover:hover {
  background: green;
}

.cell-right {
  background: yellow;
  margin-left: auto;
}
<div class="row">
  <div class="cell-left">Left</div>
  <div class="cell-title">
    <div class="hover">Pellentesque habitant morbi tristique senectus et netus et malesuada<span class="chevron">^</span></div>
  </div>
  <div class="cell-right">Right</div>
</div>

Upvotes: 1

Views: 1267

Answers (1)

Michael Benjamin
Michael Benjamin

Reputation: 371113

IE 10/11 need a specified width on the middle item. Make this adjustment to your code

.row {
  display: flex;
  width: 200px;
}

.cell-title {
  width: 100%;
  min-width: 0;
  display: flex;
}

.hover {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cell-title::after {
  content: '^';
  padding-left: 5px;
  margin-right: auto;
}

.hover:hover { background: green; }
.cell-left   { background: red; }
.cell-right  { background: yellow; }
html, body   { margin: 0; }
<div class="row">
  <div class="cell-left">Left</div>
  <div class="cell-title">
    <div class="hover">Pellentesque habitant morbi tristique senectus et netus et malesuada</div>
  </div>
  <div class="cell-right">Right</div>
</div>

jsFiddle demo

Upvotes: 1

Related Questions