div being cut off when higher on screen than parent div

Question

This codepen demonstrates the issue. Notice the red block .popup is cut off at the top.

It is getting chopped by the top of it's grandparent div, #hideExtraWidth.

I need to hide extra width (overflow-x) because of what I have in my actual implementation (JS changing the #wide div to create a carousel affect), but it also seems to be hiding the extra height (overflow-y)... even though I have this:

overflow-x: hidden;
overflow-y: visible;

If you take out both of the overflow properties.. you'll see it fixes the top being chopped but breaks in that now the width overflow is now visible as well.

How can I stop the top of .popup from being chopped while keeping the horizontal overflow hidden?

score 1 · Accepted Answer · edited May 23 '17 at 11:51

1

Sadly, “‘visible’ becomes ‘auto’ also when combined with ‘hidden’”. A workaround for your example: make your container large enough to contain the overflow by changing padding: 30px → padding: 130px, and move it back into position with margin-top: -100px. Sample.

edited May 23 '17 at 11:51

Community

1
1

answered May 19 '15 at 16:33

Honore Doktorr

1,585
1
13
20

score 0 · Answer 2 · answered May 19 '15 at 16:19

I've changed the overflow to the #outer div .. that way everything for your carousel won't appear anyway and you still manage to have the popup.

Try this:

$(".item").one( "mouseenter", function() {
  $("<div>")
    .addClass("popup")
    .appendTo($(this));
});

#outer {
  position: relative;
  padding: 0 0 0 0;
  width: 700px;
  margin: 0 auto;
  border: 1px solid red;
  overflow: hidden;
}
#somethingElse {
  text-align: center;
  background-color: purple;
  height: 100px;
  color: white;
}

#hideExtraWidth {
  width: 700px;
  height: 570px;
  padding-top: 30px;
  padding-bottom: 25px;
  margin: 0;
  position: relative;
  display: block;
  white-space: nowrap;
}

#wide {
  margin-left: -400px;
  padding: 0;
  width: 1500px;
  position: relative;
  top: 0;
  left: 0;
  display: block;
}

.item {
  border: 1px solid blue;
  background-color: green;
  white-space: normal;
  width: 495px;
  height: 515px;
  padding: 0;
  margin: 0;
  display: inline-block;
}

.popup {
  position: absolute;
  top:-70px;
  height: 100px;
  width: 100px;
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="outer">
  <div id="somethingElse">Something else</div>
  <div id="hideExtraWidth">
    <div id="wide">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
    </div>
  </div>
</div>

I can't do this in my implementation. The `#outer` div wraps the entire page content which I might not want to affect. Also, there is some margin/padding between it and the `#hideExtraWidth` div. I wouldn't want the overflow to be visible within this. — Smern, May 19 '15 at 16:31

div being cut off when higher on screen than parent div

2 Answers2