CSS Overflow auto and its working

Question

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>

vertical centering is more difficult; you can use vertical-align (with display: table, display: table-cell) or look into using flex. — Chris Cousins, Aug 27 '18 at 03:49
Hi the Webby, did you know that you embed HTML CSS and Javascript straight into the stack overflow? — dwjohnston, Aug 27 '18 at 03:51
Oh so will it affect responsiveness with display table or should I go with flex — The Webby, Aug 27 '18 at 03:52
Is your question how to center stuff vertically, or when overflow: auto causes the container to expand? The latter is answered [here](https://stackoverflow.com/questions/12783064/why-does-overflow-hidden-have-the-unexpected-side-effect-of-growing-in-height-t) (it's for overflow: hidden but it applies to both values). — BoltClock, Aug 27 '18 at 03:52
Both should I ask it as separate questions ??? Sorry if I was too vague.Was figuring out both together — The Webby, Aug 27 '18 at 03:53
I was going through overflow property and it mentions that it stretches the container to fit the size https://www.bitdegree.org/learn/css-float/#overflow if that is the case then vertical centering happens on its own if you give the necessary margin but it does not happen like that — The Webby, Aug 27 '18 at 03:55

score 1 · Answer 1 · edited Aug 27 '18 at 04:51

Just a few things about your current code:

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.
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>

CSS Overflow auto and its working

1 Answers1