フレックスアイテムがフレックスコンテナより大きく（大きく）なるようにする

Question

Netflixが現在使用できるショーを表示する「カードの行」に使用するホバー効果をシミュレートしようとしています。

あなたがカード上に置くと、項目は（一見）それがに記載されたことを行のサイズよりも大きくなる。

私はフレキシボックスを使用して、行の内側.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/