Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Alison Mercer
Alison Mercer
46 Points
Posted by Alison Mercer
Alison Mercer
46 Points

Overflow Y not visible when Overflow X is set to scroll.

I have a list displayed horizontally inline and I am trying to get it to scroll using Overflow X, however, my list items are set to scale and show a drop shadow on hover. When using Overflow X to make it scrollable the Y becomes hidden even when marked as visible or auto and cuts off the top and bottom of the list items when hovering. Is there any way to get this to work, making the list scrollable on the X-axis while making the Y visible. Thank you for any help.

<div class="holder text-cards">

<div class="card-slot">
  <div class="card text-card">
    Hello world.
  </div>
</div>

<div class="card-slot">
  <div class="card text-card">
    Hello world.
  </div>
</div>

<div class="card-slot">
  <div class="card text-card">
    Hello world.
  </div>
</div>

</holder>

<style>
body {
margin: 0;
}
.holder {
  display: flex;
  width: 100%;
  height: 190px;
  background-color: #e8e8e8;
  overflow-x: scroll; 
  overflow-y: visible;
}

.card {
  display: inline-flex;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  -webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  overflow: hidden;
}

.card:hover {
  box-shadow: 0 15px 36px 0 rgba(0, 0, 0, .21);
  -webkit-transform: scale(1.15, 1.15);
  transform: scale(1.15, 1.15);
  image-rendering: optimizeSpeed;
  image-rendering: -moz-crisp-edges;
  image-rendering: -o-crisp-edges;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: optimize-contrast;
  -ms-interpolation-mode: nearest-neighbor;
  z-index: 1000;
}

.card-slot {
padding-left: 0px;
padding-right: 0px;
margin: 10px 6px 10px 6px;
-webkit-transition: padding 800ms ease-in-out;
-moz-transition: padding 800ms ease-in-out;
-o-transition: padding 800ms ease-in-out;
transition: padding 800ms ease-in-out;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.card-slot:hover {
padding-left: 28px;
padding-right: 28px;
}

.text-card {
  display: flex;
  height: 149px;
  width: 262px;
  padding: 10px;
}
</style>
Valeshan Naidoo
Valeshan Naidoo
27,008 Points
Valeshan Naidoo
Valeshan Naidoo
27,008 Points

Can you add your code in your post? Wrap your code in 3 backticks (```) so it shows in an easy to view manner.

1 Answer

Steven Parker
Steven Parker
231,186 Points
Steven Parker
Steven Parker
231,186 Points

Apparently, the "visible" setting can only be used if it applies to both dimensions at the same time. The W3C specification actually calls for this exact behavior:

The computed values of ‘overflow-x’ and ‘overflow-y’ are the same as their specified values, except that some combinations with ‘visible’ are not possible: if one is specified as ‘visible’ and the other is ‘scroll’ or ‘auto’, then ‘visible’ is set to ‘auto’.

I found this article that discusses a somewhat complex solution and has some examples.

A simpler solution seems to be setting only one dimension's overflow at a time in nested containers, as shown in this JSfiddle.

And even simpler, if you don't mind the change of appearance, is to add enough padding to the outer container to accommodate the expansion. ("padding: 20px 0 38px;")

Also, this is unrelated but you have a "</holder>" tag in your code which should probably be "</div>" instead.