Question 273656 in Html Question posted in
Some basic documentation can be found here.

Html – element gets hidden on giving overflow to x

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>
Tags:

2

Answers


  1. 0

    You are moving it up so it might be as simple as making the parent large enough to contain that movement. Here I added some ugly borders and background colors just to show what is where.

    .page-wrapper {
  margin-top: 20px;
  border: solid 1px;
  border-color: orange;
  background-color: #FF000020;
}

.offers-parent {
  height: 200px;
  overflow-x: hidden;
  overflow-y: visible;
  border: solid 1px #00ff00;
}

.offers-child {
  width: 310px;
  height: 185px;
  background-color: red;
  cursor:pointer;
  border: solid 1px #ff00ff;
  margin-top: 12px;
}

.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>

    Alternate with padding on the parent.

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

.offers-parent {
  padding-top: 10px;
  height: 185px;
  overflow-x: hidden;
  overflow-y: visible;
  background-color: #FF00FF20
}

.offers-child {
  width: 310px;
  height: 185px;
  background-color: 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">&nbsp;</div>
    </div>
  </div>
</div>
    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search