Section Leak generating horizontal scroll

问题

I'm trying to create a way to leak an element from it's parent container.

I'm using max-width and margin: auto for the container to center.

The child element has position: relative and uses left + translateX transform to become centered.

The CSS works OK until the page gets scrolling (content height higher than screen height).

This vertical scroll also generates horizontal scrolling.

I was able to hide it using overflow-x: hidden but i really want to know why i'm getting an horizontal scroll?

Maybe is because the transform? CODE BELOW (see in fullscreen):

.leaked {
  position: relative;
  left: 50%;
  transform: translatex(-50%);
  width: 100vw;
  margin: 0;
  overflow: hidden;
}

.container {
  padding: 0 20px;
  margin: 0 auto;
  max-width: 960px;
  position: relative;
}


/* EXTRA */

.block {
  padding: 20px 0;
  background: darkred;
  color: white;
}

body {
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
}

figcaption {
  text-align: center;
  color: gray;
  font-size: 0.8em;
}

.force-scroll {
  height: 100vh;
}

<article class="container">
  <header>
    <h1>Article title</h1>
    <small>To see in action, use and 1024px wide screen or larger</small>
  </header>
  <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Enim dolore quaerat quos ex quo laborum officiis maxime molestias cum omnis. Veritatis quas, molestiae nihil soluta inventore provident minus nostrum atque!</p>
  <figure class="leaked">
    <img src="http://via.placeholder.com/1920x800" alt="Example figure" width="1920" height="800">
    <figcaption>An example figure</figcaption>
  </figure>
  <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Enim dolore quaerat quos ex quo laborum officiis maxime molestias cum omnis. Veritatis quas, molestiae nihil soluta inventore provident minus nostrum atque!</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint quis pariatur totam nostrum explicabo doloremque quaerat! Ipsum odit dolor ut corrupti hic quae provident voluptates saepe commodi, id culpa praesentium?</p>
  <section class="leaked block">
    <div class="container">
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut accusantium doloribus aspernatur laboriosam! Voluptatem blanditiis doloremque earum ab alias, modi repudiandae eveniet autem fugiat facilis ducimus? Veniam laboriosam nobis ab!
      </p>
    </div>

  </section>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque voluptates voluptas eveniet suscipit fugiat. Quidem nesciunt ducimus veritatis, sed repudiandae perferendis nam fugiat! Laborum minus consequatur hic. Ut, dolorum facilis.</p>
  <div class="force-scroll">This is only to force an scroll</div>
</article>

回答1:

According to documentation

The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they have scaled accordingly.

However, when the value of overflow on the root element is auto, any scrollbars are assumed not to exist.

So there is no way to without js to get width without scrollbars :(

回答2:

It's the width on .leaked. I changed the width from 100vw to 100% and the image reduces in size so it now fits in the container.

.leaked {
    width: 100%;
    //other styles
}

But if you do want the leaked content to go full width you need to change your html structure so .leaked sections are not inside the container, that way it will go full width:

<article class="container">
  <header>
    <h1>Article title</h1>
    <small>To see in action, use and 1024px wide screen or larger</small>
  </header>
  <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Enim dolore quaerat quos ex quo laborum officiis maxime molestias cum omnis. Veritatis quas, molestiae nihil soluta inventore provident minus nostrum atque!</p>
  </article>
  <figure class="leaked">
    <img src="http://via.placeholder.com/1920x800" alt="Example figure" width="1920" height="800">
    <figcaption>An example figure</figcaption>
  </figure>
  <article class="container">
  <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Enim dolore quaerat quos ex quo laborum officiis maxime molestias cum omnis. Veritatis quas, molestiae nihil soluta inventore provident minus nostrum atque!</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint quis pariatur totam nostrum explicabo doloremque quaerat! Ipsum odit dolor ut corrupti hic quae provident voluptates saepe commodi, id culpa praesentium?</p>
  </article>
  <section class="leaked block">
    <div class="container">
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut accusantium doloribus aspernatur laboriosam! Voluptatem blanditiis doloremque earum ab alias, modi repudiandae eveniet autem fugiat facilis ducimus? Veniam laboriosam nobis ab!
      </p>
    </div>
  </section>
  <article class="container">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque voluptates voluptas eveniet suscipit fugiat. Quidem nesciunt ducimus veritatis, sed repudiandae perferendis nam fugiat! Laborum minus consequatur hic. Ut, dolorum facilis.</p>
  <div class="force-scroll">This is only to force an scroll</div>
</article>

来源：https://stackoverflow.com/questions/48300255/section-leak-generating-horizontal-scroll

标签

html

css

css3

overflow

transform