CODEWITHSUNDEEP
csscss-position
The Webby
The Webby

Reputation: 77

CSS Overflow auto and its working

I am trying to figure out the overflow property

So to middle an element using margin:auto property it has width defined but,
what is the requirement for centering an element vertically with respect to its container/parent?

With current set up overflow happens so,
when does the overflow auto expands the container to fit the overflow element ???

div {
  margin: 200px auto;
  height: 100%;
  width: 60%;
  border: 10px solid red;
  text-align: center;
}

body {
  height: 300px;
  min-height: 500px;
  padding: 0;
  border: 10px solid yellow;
  overflow: auto;
}
<div>
  somet text
</div>

Upvotes: 0

Views: 98

Answers (1)

pg316
pg316

Reputation: 1398

Just a few things about your current code:

  1. If you want your div to be what is scrollable you should put the overflow auto on your div. Putting it on your top level container will result in you never seeing the proper scrollbars.
  2. You have a left/right margin of 200px on every div. Is there a reason for this type of margin? Maybe this can be fixed a little better using a more structured layout. For instance tables or floating divs. I think your 200px margin could start to make things look strange when the window starts getting resized.

To answer your question though, I think that you can easily do what you want using the new flexbox display option. Here is an example:

body {
  padding: 0;
  border: 10px solid yellow;
  height: 300px;
  display: flex;
}

div {
  height: 60%;
  width: 60%;
  border: 1px solid red;
  text-align: center;
  overflow: auto;
  margin: auto;
}
<div>
  somet text
  <br><br><br><br> somet text
  <br><br><br><br> somet text
  <br><br><br><br> somet text
  <br><br><br><br> somet text
  <br><br><br><br> somet text
  <br><br><br><br>
</div>

Upvotes: 1

Related Questions