1

The issue must be clear from the demo below. All flex items except the last one have their box shadow partially removed from some sides.

This works fine when there's no background on items, however if I set a background color on the flex items, the box-shadow doesn't work properly.

Jsfiddle Demo

.parent {
  display: flex;
  flex-flow: row wrap;
  margin: 40px 40px;
  width: 500px;
  height: 400px;
  font-family: Roboto;
  border: 1px solid lightgrey;
}

.child {
  flex: 1 1 175px;
  border: 1px solid lightgrey;
  padding: 10px 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background: aliceblue;
}

.child:nth-child(odd) {
  border-right: none;
}

.child:nth-child(-n+2) {
  border-bottom: none;
}

.child:hover {
  box-shadow: 0 0 20px red;
}
<div class="parent">
  <div class="child">Child 1</div>
  <div class="child">Child 2</div>
  <div class="child">Child 3</div>
  <div class="child">Child 4</div>
</div>
D_S_X
  • 1,351
  • 5
  • 17
  • 35
  • 1
    Does this answer your question? [CSS: Why background-color breaks/removes the box-shadow?](https://stackoverflow.com/questions/10587814/css-why-background-color-breaks-removes-the-box-shadow) – Magiczne Sep 21 '20 at 09:56
  • 2
    apply z-index only on hover, it works – Temani Afif Sep 21 '20 at 10:01

0 Answers0