element gets hidden on giving overflow to x

October 27, 2023

Even though given overflow-y visible when hovering on the child div its getting 10px hidden i want that 10px of the child should be shown.

If i removed both overflow properties its working. Whats the issue happening here how to fix it. I need overflow-x to be hidden

.page-wrapper {
  margin-top: 20px;
  border: solid 1px;
}

.offers-parent {
  height: 185px;
  overflow-x: hidden;
  overflow-y: visible;
}

.offers-child {
  width: 310px;
  height: 185px;
  background: red;
  cursor:pointer;
}

.offers-child:hover {
  transform: translateY(-10px);
}

<div class="page-wrapper">
<div class="offers-parent">
  <div class="offers-child-wrapper">
    <div class="offers-child"></div>
  </div>
</div>
</div>

>Solution :

Try overflow-x:clip

.page-wrapper {
  margin-top: 20px;
  border: solid 1px;
}

.offers-parent {
  height: 185px;
  overflow-x: clip;/* changed this from hidden */
  overflow-y: visible;
}

.offers-child {
  width: 310px;
  height: 185px;
  background: red;
  cursor:pointer;
}

.offers-child:hover {
  transform: translateY(-10px);
}

<div class="page-wrapper">
<div class="offers-parent">
  <div class="offers-child-wrapper">
    <div class="offers-child"></div>
  </div>
</div>
</div>