0

Can anyone explain me what is going on here. I specify that overflow-x should be visible and I get horizontal scrollbar. Why is this happening? Am I missing something or should I get some sleep?

JSFIDDLE

HTML

<div id="container">
<p id="one">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit corporis est esse provident assumenda consequatur vel atque minima id veritatis! Totam iure omnis laudantium provident dolorum blanditiis modi voluptatibus nihil.</p>
<p id="two">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum tempore debitis blanditiis iure aperiam quam vero esse perferendis doloremque eos natus nemo quos mollitia ratione qui laboriosam itaque animi tempora.</p>
</div>

CSS

/* DIFFERENCE BETWEEN WIDTH:AUTO & WIDTH:100% */
* {margin: 0;padding: 0;}
#container {
    overflow-y: hidden;
    overflow-x: visible;
    width: 500px;
    margin: auto;
    background-color: whitesmoke;
}
#one {
    width: auto;
    padding:10px;
    margin: 20px;
    border:10px solid gray;
}
#two {
    width: 100%;
    padding:10px;
    margin: 20px;
    border:10px solid gray;
}
user3448600
  • 3,648
  • 5
  • 17
  • 23

2 Answers2

1

So you specify to always show scroll bar for x-axis. Use overflow-x: auto to show scroll bar only when needed.

Justinas
  • 41,402
  • 5
  • 66
  • 96
  • No I don't want scroll bar, I need my parapgraph to spill out my container and there should not be any scroll bars on x-axis as I declared overflow-x: visible. – user3448600 Oct 03 '14 at 13:12
  • That's not what overflow-x does. overflow-x is for the scrollbar – Steve Oct 03 '14 at 13:13
  • I think you're confusing `overflow-x: visible` with `overflow-x: scroll` there, Steve. – Remco van Dalen Oct 03 '14 at 13:22
  • I know all that :) What bothers me is the behavior of overflow-x property which I set to be visible on x-axis, so that means that there should not be any scroll bars on horizontal axis, right ? – user3448600 Oct 03 '14 at 13:24
  • I don't really understand why it doesn't work. I do know however that by fiddling with your JSFiddle, it's working as intended as soon as I remove the `overflow-y: hidden` line. Apparently the overflow-y interacts with the overflow-x somehow. – Remco van Dalen Oct 03 '14 at 13:26
  • Yes just wanted to say that, when you remove overflow-y it works the way I want. that is so wierd – user3448600 Oct 03 '14 at 13:28
  • A quick google turned up this reference page: [http://www.brunildo.org/test/Overflowxy2.html](http://www.brunildo.org/test/Overflowxy2.html). Apperently it's just a combination that's not possible. You might be able to trick it by adding an extra container and putting the `overflow-y: hidden` on that one, if you absolutely have to have it. – Remco van Dalen Oct 03 '14 at 13:29
  • It seems the page is down for me :/ – user3448600 Oct 03 '14 at 13:32
  • Weird, it's working fine for me. But let me link you the relevant W3C page then [http://www.w3.org/TR/css3-box/#overflow-x](http://www.w3.org/TR/css3-box/#overflow-x). If you scroll down to the text below Example XX it mentions specific rules for the "visible" value. For some reason it doesn't mention the combination with "hidden", but it works the same way. – Remco van Dalen Oct 03 '14 at 13:40
0

Try this, change width of the second 'p' tag to auto and change overflow-x: auto. 

#container {
    overflow-y: hidden;
    overflow-x: auto;
    width: 500px;
    margin: auto;
    background-color: green;
}
#one {
    width: auto;
    padding:10px;
    margin: 20px;
    border:10px solid gray;
}
#two {

    width: auto;
    padding:10px;
    margin: 20px;
    border:10px solid gray;
}

Look at here: http://jsfiddle.net/6j5057my/1/

Zanoldor
  • 378
  • 6
  • 13