Z-index not applying on :hover for flex elements

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;
  }