css - 使 flex 元素超过(大于)flex 容器

Question

我正在尝试模拟 Netflix 的悬停效果使用它的“卡片行”显示当前可供观看的节目。

当您将鼠标悬停在卡片上时，该元素(看起来)会变得比它所在的行的大小更大。

我正在使用 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/