html - Position absolute with Left:100% , Child element goes out of the parent continer

Question

I have some html elements: basically a container div and a child div. So when I give child div the CSS property left: 100%, it goes out of the parent div. The property right: 0 or CALC will do the trick but I want get this done only with left: 100%, and no Javascript. So is there any way to get this done?

.parent{
  border: 1px solid #000;
  height: 500px;
  position: relative;
  width: 500px;
}
.child{
  background: #FF0;
  height: 100px;
  left: 100%;
  position: absolute;
  width: 100px;
}

https://jsfiddle.net/evoSL/yd48v14m/4/

Answer 1

This is the right behavior. If you set left:100% in this setup, it will take the width of the parent and pushes the child 100% of that width to the right, which is 500px. You can, as already mentioned, set a negative margin width fixed pixel values, but i wouldn't recommend it. What if you have a fluid width layout? It won't work.

What's wrong with right: 0, it provides exactly what you are looking for.

Otherwise, if you still want to work with left: 100%; you can add transform: translateX(-100%) to the child. this will move the child on the X-axis by it's width.