Как предотвратить выход дочернего элемента из родительского, если применяются значения translate или matrix? - PullRequest
1 голос
/ 06 июля 2019

Например, у меня есть элемент, который имеет те же свойства ширины и высоты, что и его родитель.Я хочу, чтобы родительский элемент содержал дочерний элемент, даже если применяются значения translate или transform.

Когда я применяю свойства x и y к translate или transform, дочерний элемент удаляется от своего родителя.Я пробовал значения позиции, но это не похоже на работу.

.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>
...