0

I'm trying to create a horizontal image scroll using flexboxes, which I am fairly new to. I'm very happy with its abilities but here is one thing I cannot figure out.

diagram

So it seems to be fine as long as the parent and the child are within the width of the window but as soon as the child (and also the parent) extend past the width of the window something causes it to give the window some extra height. I've watch a bunch of videos and googled a lot. I don't know this is.

Here's my SCSS:

.images {
    position: absolute;
    left: 0;
    top: 0;
    height: calc(100% - 70px);
    z-index:0;
    display: flex;
    flex-direction: row;
    .image {
        width: 100vw;
        height: 100%;
        overflow: hidden;
        border-right: 4px solid white;
    }
}
Striding Cloud
  • 1
  • 2
  • 1
    Hard to tell from the limited information posted. Maybe try adding `align-items: flex-start` to the container. See [*How to disable equal height columns in Flexbox?*](http://stackoverflow.com/a/33043084/3597276). – Michael Benjamin Aug 25 '16 at 16:07
  • tried your css and couldn't find an issue. could you provide you html too? or perhaps a fiddle? – kukkuz Aug 25 '16 at 16:20

1 Answers1

0

Okay, I figured it out. I didn't declare overflow-y: hidden. And there was an image in the child container that was making my whole document taller. Yeah, I didn't provide enough information for this question to be properly answered.

Striding Cloud
  • 1
  • 2