css - Centered HTML content gets an extra indent when it overflows off the page

I have an HTML which is centered horizontally and contains a bunch of <p> tags. When the centered div height exceeds the height of the page, it indents the div. How can I stop this from happening?

.container {
  display: flex;
  justify-content: center;
}

.center {
  width: 600px;
  max-width: 600px;
  border-left: 1px;
  border-right: 1px;
  border-top: 1px;
  border-bottom: 1px;
  border-color: rgb(0, 0, 0);
  border-style: solid;
}

<div class="container">
  <div class="center">
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
  </div>
</div>

I have an HTML which is centered horizontally and contains a bunch of <p> tags. When the centered div height exceeds the height of the page, it indents the div. How can I stop this from happening?

.container {
  display: flex;
  justify-content: center;
}

.center {
  width: 600px;
  max-width: 600px;
  border-left: 1px;
  border-right: 1px;
  border-top: 1px;
  border-bottom: 1px;
  border-color: rgb(0, 0, 0);
  border-style: solid;
}

<div class="container">
  <div class="center">
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
  </div>
</div>

I have tried setting overflow to 'auto' in the center div. This has not worked.

Share Improve this question edited Mar 5 at 23:20 Ori Drori 194k32 gold badges238 silver badges229 bronze badges asked Mar 5 at 23:15 Max Fogdall 112 bronze badges

1 You mean, the browser scrollbar comes showing up causing the actual viewport to be a little bit more narrow and thus forcing the center of the page to be a little more left than if the scrollbar wasn't visible? – prettyInPink Commented Mar 5 at 23:29

Add a comment |

1 Answer 1

Sorted by: Reset to default 1

To prevent the centered div from jumping when the scrollbar appears due to height changes, you can use the new scrollbar-gutter property. Use the property on the scroll container (<html> in this case):

html {
  scrollbar-gutter: stable both-edges;
}

Demo - run the demo, click "Full page" and reduce the height using the dev tools:

html {
  scrollbar-gutter: stable both-edges;
}

.container {
  display: flex;
  justify-content: center;
}

.center {
  width: 600px;
  max-width: 600px;
  border-left: 1px;
  border-right: 1px;
  border-top: 1px;
  border-bottom: 1px;
  border-color: rgb(0, 0, 0);
  border-style: solid;
}

<div class="container">
  <div class="center">
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
  </div>
</div>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

css - Centered HTML content gets an extra indent when it overflows off the page - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)