I have two side by side divs. The right div is set to expand on hover and display a message. I have set the z-index on the expanding div to be z-index: 1 and the left div and all its children to be z-index: 0, however the expanding div will only expand as far as the text in the div beside it.
I have read multiple questions here about z-index and flex items but can't work out what I am doing wrong. I have added a higher z-index to my first flex-item as described here Z-index doesn't work with flex elements? but that has not fixed it.
.container {
display: flex;
background-color: lightgray;
height: 48px;
width: 139px;
border-radius: 4px;
}
.container .inner {
height: 48px;
}
.container .inner > div {
display: flex;
z-index: 0;
}
.container .inner.left {
display: flex;
flex-direction: column;
flex: 1 0 auto;
padding-left: 10px;
justify-content: center;
}
.container .inner.right {
display: flex;
flex: 0 1 8px;
background-color: red;
border-radius: 0 4px 4px 0;
overflow: hidden;
transition: 0.3s;
cursor: pointer;
z-index: 1;
}
.container .inner.right .info-msg {
display: none;
transition: 0.3s;
}
.container .inner.right:hover {
flex: 0 1 150px;
}
.container .inner.right:hover .info-msg {
display: flex;
}<div class="container"><div class="inner left"><div class="time">9:00am - 5:00pm</div><div class="name">Worker</div></div><div class="inner right"><div class="info-msg">Message</div></div></div>