使flex项比flex容器增长（更大）

Question

我试图模拟Netflix在其上使用的悬停效果＆＃34;排卡＆＃34;显示当前可供观看的节目。

当您将鼠标悬停在卡片上时，该项目（看起来）会比它所包含的行的大小增大。

我使用的是flexbox，并且行内有.row和.card个项目。我尝试过使用transform: scale(1.5)，但这样可行，除非它不会使卡大于行的大小。有什么建议吗？

Answer 1

也许我不太了解你的问题。当我尝试JsFiddle时，我有你想要的结果。元素悬停大于父元素“行”。

.row{
  position: relative;
  display: flex;
  background: blue;
}

.cards{
  width: 50px;
  height: 50px;
  background: red;
  margin: 10px;
}

.cards:hover{
  transform: scale(1.5);
}
<div class="row">
  <div class="cards">1</div>
  <div class="cards">1</div>
  <div class="cards">1</div>
</div>

https://jsfiddle.net/nesquimo/vbb8td62/1/