IE 10 Width Issue with Absolutely Positioned Child

Question

I have this issue where the child extends past the parent. The child has percentage width and is absolutely positioned. I created a fiddle here: https://jsfiddle.net/f2zf7par/

<div class="grand-parent">
  <div class="parent">
   <table class="child"><tr><td>test</td></tr><tr><td>test</td></tr>
   </table>
  </div>
</div>

.grand-parent {width: 100%; max-width: 400px; height: 300px;  background: #000;}
.parent {
 width: 100%;  position: relative;}
.child {background: #fff; width: 50%; height: 50%;position: absolute; right: 0;}

How can I have IE behave the same way as other browsers?

sinisake sinisake · Accepted Answer · 2017-01-04T23:50:39

Instead right:0, you can do this:

left:50%;

Demo: https://jsfiddle.net/f2zf7par/1/

It is basically the same, right, and look the same in IE (11, hopefully 10, too), Chrome and Firefox.

IE 10 Width Issue with Absolutely Positioned Child

1 Answers