CODEWITHSUNDEEP
css
Rahul R Badenkal
Rahul R Badenkal

Reputation: 81

horizontal scroll cutting items off

.width-100vw {
    width: 100vw;
}

.height-100vh {
    height: 100vh;
}

.layout {
    min-width: 1000px;
}

.flex {
    display: flex;
}

.justify-center {
    justify-content: center;
}

.absolute-scroll-x {
    overflow-x: auto;
    overflow-x: overlay;
}

.width-100 {
    width: 100% !important;
}

.height-100 {
    height: 100%;
}

.left-side {
    width: calc((7 / 16 * 100%));
    background-color: orange;
}

.right-side {
    width: calc((9 / 16 * 100%));
    background-color: red;
}
<div class="width-100vw height-100vh flex justify-center absolute-scroll-x">
  <div class="width-100 height-100 flex layout">
    <div class="height-100 left-side">

    </div>

    <div class="height-100 right-side">

    </div>
</div>

Loom link

When I decrease the screen width to 344px (in chrome dev tools), then as per dev tools, the layout div is of width 1000px (correct), left div is of width 437.5px (correct) and right div is of width 562.5px (correct). But scrolling clearly shows that the left div is way smaller than the 437.5px. Why is it so?

Upvotes: 4

Views: 2263

Answers (1)

AssGoblin69
AssGoblin69

Reputation: 832

Answer is very simple. You can not scroll to the left past the beginning of the page. Y-axis scrolling begins at 0 and goes on to the end of the content, if you add more content it goes further, but if you move content up with lets say top: -5000px scrolling area will not be expanded, everything below 0 just gets cut off. Same with X-axis, everything on the left below 0 gets cut off.

Your main div has justify-content: center; style which puts your layout div always in the center, no matter how big it is. When main div is smaller then layout div, since layout has min-width: 1000px; it puts it to the center and as result everything on the left gets cut off.

Main div main

Layout div (centered) layout

Bigger than Main div. Extends to the right and left, since it is centered, but everything to the left can not be reached with scrolling. Scrolling does not go below 0.

Left side element left-side

Is actually correct size, but looks smaller because can not be accessed via scrolling.

In your case everything can be fixed by just removing justify-center from main div.

Upvotes: 6

Related Questions