Z-index not applying on :hover for flex elements - html

Question

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>

Answer 1

Z-Index is not the issue here. You can set the position to absolute so the right div goes over the left on hover.
This code works:
.container {
height: 48px;
width: 139px;
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
background-color: lightgray;
border-radius: 4px;
}
.inner {
padding-left: 10px;
}
.right {
height: 48px;
width: 8px;
position: absolute;
right: 0px;
display: flex;
align-items: center;
background-color: red;
border-radius: 0 4px 4px 0;
transition: 0.7s;
cursor: pointer;
}
.right:hover {
width: 129px;
border-radius: 4px;
}
.info-msg {
overflow: hidden;
}

Answer 2

This is not a z-index issue. It is a width issue. When the element expands the other element still occupies part of the width and therefore the expanding element stops.
You can add flex-shrink: 1 to the left element for the effect to take place. Also, you can set different position. Or you can use transform: translateX(-100%).
.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;
/* Add flex shrink */
flex-shrink: 1;
}
.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>

Answer 3

As mentioned in the comments above, you can make inner right div position: absolute with parent div position relative.
Check the snippet:
.container {
display: flex;
background-color: lightgray;
height: 48px;
width: 139px;
border-radius: 4px;
position: relative;
}
.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;
background-color: red;
border-radius: 0 4px 4px 0;
overflow: hidden;
transition: 0.3s;
cursor: pointer;
z-index: 1;
position: absolute;
right: 0;
top: 0;
bottom: 0;
left: calc(100% - 8px);
width: 8px;
padding: 5px;
box-sizing: border-box;
}
.container .inner.right .info-msg {
display: none;
transition: 0.3s;
}
.container .inner.right:hover {
left: 0;
width: 100%;
border-radius: 4px;
}
.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>