0

There seems to be a similar question to this, and it was resolved by adding padding-right. However, in my case, that won't work because I don't know the width for any of my div until contents are rendered at run time via ajax call. I have something similar to this

Assuming below pseudocodes are syntactically correct.

<div id="parent">
    <div id="child1"> Lots of contents </div>
    <div id="child2"> Lots of contents </div>
</div>

#parent {
    overflow: auto;
    max-width: 600px;
}
#child1 , #child2 {
    display: inline-block;
    max-width: 300px;
}
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Infinity
  • 3,695
  • 2
  • 27
  • 35
  • `
    `? Div elements should have a closing tag. Also, that is not near enough code to go off of.     – Jace Cotton Oct 26 '13 at 01:57
  • @quynh The title has no implication in the question statement. clarify it. – Rajesh Paul Oct 26 '13 at 03:53
  • By editing your question out entirely, you're essentially taking away the very content that makes it a duplicate. Don't do that; voting to close as you have done is enough. – BoltClock Nov 17 '13 at 09:11

2 Answers2

4

You can set your overflow-x to hidden, and overflow-y to auto. That will give you vertical scrolling without horizontal scrolling.

#parent { overflow-x:hidden; overflow-y:auto; }
#child1, #child2 { overflow-x:hidden; overflow-y:auto; }
Matthew Johnson
  • 4,875
  • 2
  • 38
  • 51
  • 4
    That is true but if my contents are really overflow x direction then I still want the horizontal scrollbar. In this case, the scrollbar shouldn't be there. It's appeared due to the fact that the vertical scrollbar appears and take up extra spaces from the parents width. – Infinity Oct 26 '13 at 02:09
  • The only way you're going to be certain to get rid of the vertical scroll bars would be to set overflow-y to hidden, but then you'll lose content appears after the bottom of the div. – Matthew Johnson Oct 26 '13 at 02:14
0

You are attempting to use self closing tags on the child1 and child2 elements. This will not render properly in most browsers. Though some browsers will re-write the DOM with a closing tag, it is not good practice as these browsers will only re-write within certain perimeters (truly dependent on the type of containing element).

Here is the code with self closing tags: http://jsfiddle.net/nMPwV/

Here is the code with closing tags: http://jsfiddle.net/nMPwV/1/

Rajeesh
  • 4,377
  • 4
  • 26
  • 29
Overflow Stack
  • 833
  • 5
  • 9
  • 1
    Fiddle code needs to be reproduced in your answer here without having to force the reader to ">>>CLICK HERE<<<". – BoltClock Nov 17 '13 at 09:12