Strange behaviour of position absolute inside table-cell on IE11 - html

Question

I have to fix this layout, which is a messy combination of flexbox, table layout and absolute positioning.
While it's working normal on Chrome, FF and Safari, the output screen on IE11 is strange.
In my code, I want the span to be at the bottom-right of each square, but on IE11, it appears on top-right instead.
Can anyone please help me to fix this problem? The constraint here is that the flexbox .container and the table system must be maintained. I want to fix only the span element. Thanks in advance!
.container {
display: flex;
width: 400px;
}
.inner {
width: 50%;
}
.table {
display: table;
width: 100%;
border: 1px solid;
}
.table:before {
content: '';
display: table-cell;
width: 0;
padding-bottom: 100%;
}
.cell {
display: table-cell;
vertical-align: bottom;
position: relative;
padding: 20px;
}
.cell span {
position: absolute;
bottom: 20px;
right: 20px;
}
<div class="container">
<div class="inner">
<div class="table">
<div class="cell">
Yeah?
<span>Yo!</span>
</div>
</div>
</div>
<div class="inner">
<div class="table">
<div class="cell">
Yeah?
<span>Yo!</span>
</div>
</div>
</div>
</div>

Answer 1

remove your .cell span block and
use below code instead of that.
i have checked its working in every browser.
.cell span {
float: right;
}

Answer 2

One thing you can do to fix it in IE11 is to wrap your cell contents into a block container and then add position: relative to it. Now you can adjust the position with right: 0px - see demo below:
.container {
display: flex;
width: 400px;
}
.inner {
width: 50%;
}
.table {
display: table;
width: 100%;
border: 1px solid;
}
.table:before {
content: '';
display: table-cell;
width: 0;
padding-bottom: 100%;
}
.cell {
display: table-cell;
vertical-align: bottom;
position: relative;
padding: 20px;
}
.cell span {
position: absolute;
/*bottom: 20px;
right: 20px;*/
right: 0px; /* ADDED */
}
.cell div { /* ADDED */
position: relative;
}
<div class="container">
<div class="inner">
<div class="table">
<div class="cell">
<div>Yeah?
<span>Yo!</span></div>
</div>
</div>
</div>
<div class="inner">
<div class="table">
<div class="cell">
<div>Yeah?
<span>Yo!</span></div>
</div>
</div>
</div>
</div>