This issue is driving me nuts. I've tried to implement every answer I've found on Google and on SO. I just want the text under the images to wrap correctly in IE11 like every other browser does in this container. The content is a table with flexbox properties. I have set the container to a set width. When I allow fluid, it doesn't wrap anywhere. But I'm not worried about that. I've tried adding width:100% and max-width:100% to the children, parents and grandparents. I've also tried adding flex-basis:100% everywhere I can think. Any help on this would be much appreciated.
body {
box-sizing: border-box;
}
.container {
width: 500px;
z-index: 1000;
float: none;
padding: .1rem 0;
margin: 0 auto;
font-size: 0.9rem;
color: #212529;
text-align: left;
list-style: none;
background-color: #fff;
background-clip: padding-box;
border: 1px solid rgba(0,0,0,.15);
border-bottom: .5rem solid #008938;
max-height: calc(100vh - 20px);
overflow-y: auto;
overflow-x: hidden;
}
.p-3 {
padding-right: 1rem !important;
}
.text-center {
text-align: center!important;
}
.d-flex {
display: flex !important;
}
.flex-row {
flex-direction: row !important;
}
.flex-column {
flex-direction: column !important;
}
.flex-fill {
flex: 1 1 auto!important;
}
.align-items-stretch {
align-items: stretch!important;
}
.text-nowrap {
white-space: nowrap !important;
}
.text-dark {
color: #212529 !important;
}
.text-muted {
color: #bbbbbb;
text-shadow: none;
background-color: transparent;
border: 0;
}
img {
padding-top: .75rem;
padding-bottom: .75rem;
color: #6c757d;
text-align: left;
caption-side: bottom;
}
a {
text-decoration: none;
}
table {
border-collapse: collapse;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class='container'>
<table>
<tr class="d-flex flex-row">
<td class="d-flex align-items-stretch p-3">
<a href="#" class="d-flex flex-column text-center">
<div>
<img src="https://via.placeholder.com/150x70" alt="Normal title" role="presentation">
</div>
<div class="flex-fill">
<strong class="text-dark">Normal title</strong>
</div>
<div>
<span class="text-muted text-nowrap">Valid from date to date</span>
</div>
</a>
</td>
<td class="d-flex align-items-stretch p-3">
<a href="#" class="d-flex flex-column text-center">
<div>
<img src="https://via.placeholder.com/150x70" alt="normal title" role="presentation">
</div>
<div class="flex-fill">
<strong class="text-dark">
Extra super long title sa;ldjf;lsadf j;lsajf ;lfdskj;sa jfd;lksa kjfds;lkjsafd;l jdsaf
</strong>
</div>
<div>
<span class="text-muted text-nowrap">Valid from date to date</span>
</div>
</a>
</td>
<td class="d-flex align-items-stretch p-3">
<a href="#" class="d-flex flex-column text-center align-items-center flex-wrap menu-flyer-link">
<div>
<img src="https://via.placeholder.com/150x70" alt="kind of long title" role="presentation">
</div>
<div class="flex-fill align-self-stretch">
<strong class="text-dark">Long title that is supposed to span 2 lines</strong>
</div>
<div>
<span class="text-muted text-nowrap">Valid from date to date</span>
</div>
</a>
</td>
</tr>
</table>
</div>
</body>
</html>Here is a JSBin of the example as well: https://jsbin.com/qewijuhoco/1/edit?html,css,output
JSFiddle does not support IE11 anymore so had to use JSBin
UPDATE: If it makes any difference, I tried swapping out all the <table>, <tr>, and <td> tags with <div> tags. This didn't seem to have any affect.
In HTML, there is no such thing as "a <table> with flexbox properties".
The CSS table-model as defined in CSS Level 2 specs has specific rules regarding what elements can be children of what elements and under which conditions.
In your example, you can't have display:flex elements as immediate children of display:table-row-group elements. Furthermore, if <tr> (display:table-row elements) are placed directly under a <table> element, you'll notice browsers automatically add a <tbody> (display:table-row-group) wrapper around them.
These rules are important for the table display model and how it generates column sizes. You should also note the table model is a very complex and slow model for rendering and you'll notice performance issues when dealing with more than 50 items, particularly if you're performing DOM manipulations on each cell, which is not the case of box model, flexbox model or grid layout model.
The fact that your code "works" in some browsers is irrelevant. Since your CSS rules are invalid, browsers are free to do what they consider optimal, and that differs from browser to browser, since there is no official recommendation for it.
There are several ways to fix your layout but you probably you want to remove d-flex from <tr>s and <td>s and wrap the <td> contents in a d-flex wrapper according to your needs (=> solution 1).
Also note using <table> elements for layout is generally regarded as a bad idea (=> solution 2).
<table>s: body {
box-sizing: border-box;
}
.container {
width: 500px;
padding: .1rem 0;
margin: 0 auto;
font-size: 0.9rem;
color: #212529;
text-align: left;
list-style: none;
background-color: #fff;
background-clip: padding-box;
border: 1px solid rgba(0,0,0,.15);
border-bottom: .5rem solid #008938;
max-height: calc(100vh - 20px);
overflow-y: auto;
overflow-x: hidden;
}
.text-center {
text-align: center!important;
}
.d-flex {
display: flex !important;
}
.flex-row {
flex-direction: row !important;
}
.flex-column {
flex-direction: column !important;
}
.flex-fill {
flex: 1 1 auto!important;
}
.align-items-stretch {
align-items: stretch!important;
}
.text-nowrap {
white-space: nowrap !important;
}
.text-dark {
color: #212529 !important;
}
.text-muted {
color: #bbbbbb;
text-shadow: none;
background-color: transparent;
border: 0;
}
img {
padding-top: .75rem;
padding-bottom: .75rem;
color: #6c757d;
text-align: left;
caption-side: bottom;
}
td {
position: relative;
}
a {
text-decoration: none;
}
td > a > * {
flex-grow: 0;
}
td > a > .flex-fill {
flex-grow: 1;
}
table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
}
td {
width: 33.33%;
vertical-align: top;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class='container'>
<table>
<tr>
<td>
<a href="#" class="d-flex flex-column text-center">
<div>
<img src="https://via.placeholder.com/150x70" alt="Normal title" role="presentation">
</div>
<div class="flex-fill">
<strong class="text-dark">Normal title</strong>
</div>
<div>
<span class="text-muted text-nowrap">Valid from date to date</span>
</div>
</a>
</td>
<td>
<a href="#" class="d-flex flex-column text-center">
<div>
<img src="https://via.placeholder.com/150x70" alt="normal title" role="presentation">
</div>
<div class="flex-fill">
<strong class="text-dark">
Extra super long title sa;ldjf;lsadf j;lsajf ;lfdskj;sa jfd;lksa kjfds;lkjsafd;l jdsaf
</strong>
</div>
<div>
<span class="text-muted text-nowrap">Valid from date to date</span>
</div>
</a>
</td>
<td>
<a href="#" class="d-flex flex-column text-center align-items-center flex-wrap menu-flyer-link">
<div>
<img src="https://via.placeholder.com/150x70" alt="kind of long title" role="presentation">
</div>
<div class="flex-fill align-self-stretch">
<strong class="text-dark">Long title that is supposed to span 2 lines</strong>
</div>
<div>
<span class="text-muted text-nowrap">Valid from date to date</span>
</div>
</a>
</td>
</tr>
</table>
</div>
</body>
</html>body {
box-sizing: border-box;
}
.container {
width: 500px;
z-index: 1000;
float: none;
padding: .1rem 0;
margin: 0 auto;
font-size: 0.9rem;
color: #212529;
text-align: left;
list-style: none;
background-color: #fff;
background-clip: padding-box;
border: 1px solid rgba(0, 0, 0, .15);
border-bottom: .5rem solid #008938;
max-height: calc(100vh - 20px);
overflow-y: auto;
overflow-x: hidden;
}
.p-3 {
padding-right: 1rem !important;
}
.text-center {
text-align: center!important;
}
.d-flex {
display: flex !important;
}
.flex-row {
flex-direction: row !important;
}
.flex-column {
flex-direction: column !important;
}
.flex-fill {
flex: 1 0 auto!important;
}
.align-items-stretch {
align-items: stretch!important;
}
.text-nowrap {
white-space: nowrap !important;
}
.text-dark {
color: #212529 !important;
}
.text-muted {
color: #bbbbbb;
text-shadow: none;
background-color: transparent;
border: 0;
}
img {
padding-top: .75rem;
padding-bottom: .75rem;
color: #6c757d;
text-align: left;
caption-side: bottom;
}
a {
text-decoration: none;
}
table {
border-collapse: collapse;
}
.row {
display: flex;
width: 100%;
}
.row > div {
flex: 0 1 33%;
padding: 0 .5rem .5rem;
box-sizing: border-box;
display: fLex;
flex-direction: column;
}
.row > div > a {
flex-grow: 1;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class='container'>
<div class="row">
<div>
<a href="#" class="d-flex flex-column text-center">
<div>
<img src="https://via.placeholder.com/150x70" alt="Normal title" role="presentation">
</div>
<div class="flex-fill">
<strong class="text-dark">Normal title</strong>
</div>
<div>
<span class="text-muted text-nowrap">Valid from date to date</span>
</div>
</a>
</div>
<div>
<a href="#" class="d-flex flex-column text-center">
<div>
<img src="https://via.placeholder.com/150x70" alt="normal title" role="presentation">
</div>
<div class="flex-fill">
<strong class="text-dark">
Extra super long title sa;ldjf;lsadf j;lsajf ;lfdskj;sa jfd;lksa kjfds;lkjsafd;l jdsaf
</strong>
</div>
<div>
<span class="text-muted text-nowrap">Valid from date to date</span>
</div>
</a>
</div>
<div>
<a href="#" class="d-flex flex-column text-center align-items-center flex-wrap menu-flyer-link">
<div>
<img src="https://via.placeholder.com/150x70" alt="kind of long title" role="presentation">
</div>
<div class="flex-fill align-self-stretch">
<strong class="text-dark">Long title that is supposed to span 2 lines</strong>
</div>
<div>
<span class="text-muted text-nowrap">Valid from date to date</span>
</div>
</a>
</div>
</div>
</div>
</body>
</html>Note I didn't clean them up. My advice: start from scratch and don't use !important.