如果应用了translate或matrix值，如何防止子元素从其父元素转义？

Question

例如，我有一个元素，其宽度和高度属性与其父元素相同。即使应用了translate或transform值，我也希望父元素包含子元素。

在什么时候，我将x和y属性应用于平移或变换，使子级移动远离父级。我已经尝试过位置值，但是似乎不起作用。

.parent {
  width: 50px;
  height: 50px;
  background: #ddd;  
}

.child {
  width: 50px;
  height: 50px;
  background: red;
  transform: translate(40px, 40px);
}

<div class="parent">
<div class="child">
</div>
</div>

<p>how do I restrict the red one within it's parent?</p>