Expanded div overlapping its parent - z-index issue - css

Question

I need to display a collection of tiles (laid out using flexbox), where each tile has an "expando" child that - on hover - is supposed to expand beyond the parent limit. This part works, except for z-index. This doesn't surprise me after all, as every tile make its own z-index stacking context. I am just lost of ideas how to solve it.
I would really need to make these tiles and their children self-contained (to be later extracted into an angular component).
HTML
<div class="row">
<div class="holder">
<div class="plate">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum vero necessitatibus possimus praesentium, eos magnam mollitia doloribus adipisci, nam et, accusamus vel pariatur ipsam dolore iusto officia amet veritatis eveniet.
</div>
</div>
<div class="holder">
<div class="plate">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum vero necessitatibus possimus praesentium, eos magnam mollitia doloribus adipisci, nam et, accusamus vel pariatur ipsam dolore iusto officia amet veritatis eveniet.
</div>
</div>
<div class="holder">
<div class="plate">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum vero necessitatibus possimus praesentium, eos magnam mollitia doloribus adipisci, nam et, accusamus vel pariatur ipsam dolore iusto officia amet veritatis eveniet.
</div>
</div>
</div>
CSS
.row {
display: flex;
padding: 3em;
}
.holder {
position: relative;
height: 100px;
width: 100px;
background: red;
margin-right: 30px;
z-index: 1;
}
.plate {
display: none;
border: 1px solid limegreen;
background: rgba(255, 255, 255, 0.6);
width: 190px;
color: green;
left: 50%;
transform: translate(-50%, 0);
position: absolute;
padding: 1em;
box-sizing: border-box;
z-index: 1000;
}
.holder:hover .plate {
display: flex;
}
jsfiddle

Answer 1

You have to set z-index on .holder:hover.
.holder:hover {
z-index:10;
}
https://jsfiddle.net/hk149512/3/

Answer 2

You may need to change the z-index for the holder element on :hover, just add to your code:
.holder:hover {
z-index:10
}
.row {
display: flex;
padding: 3em;
}
.holder {
position: relative;
height: 100px;
width: 100px;
background: red;
margin-right: 30px;
z-index: 1;
}
.plate {
display: none;
border: 1px solid limegreen;
background: rgba(255, 255, 255, 0.6);
width: 190px;
color: green;
left: 50%;
transform: translate(-50%, 0);
position: absolute;
padding: 1em;
box-sizing: border-box;
z-index: 1000;
}
.holder:hover {
z-index:10
}
.holder:hover .plate {
display: flex;
}
<div class="row">
<div class="holder">
<div class="plate">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum vero necessitatibus possimus praesentium, eos magnam mollitia doloribus adipisci, nam et, accusamus vel pariatur ipsam dolore iusto officia amet veritatis eveniet.
</div>
</div>
<div class="holder">
<div class="plate">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum vero necessitatibus possimus praesentium, eos magnam mollitia doloribus adipisci, nam et, accusamus vel pariatur ipsam dolore iusto officia amet veritatis eveniet.
</div>
</div>
<div class="holder">
<div class="plate">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum vero necessitatibus possimus praesentium, eos magnam mollitia doloribus adipisci, nam et, accusamus vel pariatur ipsam dolore iusto officia amet veritatis eveniet.
</div>
</div>
</div>