Menu
I am trying to have a page overflow horizontally and not vertically, so if the content does not fit in the page window, i would like it to be scrollable only via the overflow-x bar, thus keeping the page a fixed height. The idea is to make it 'grow' horizontally - so to the right. Could this be done with CSS ideally?
Any help will be appreciated! :)
Thanks and take care, Sincerely, Piotr.
763
Here's the solution :). This does not require to set a fixed width, but you still have to control the height of your content. And in production you'll most probably want to add inner containers, and add some tweaks to make it work in IE.
Fiddle: http://jsfiddle.net/AWq39/7/.
<body>
<div class="page-container">...</div>
<div class="page-container">...</div>
<div class="page-container">...</div>
</body>
html, body{
height: 100%;
padding: 0;
margin: 0;
white-space: nowrap;
font-size: 0;
}
.page-container{
display: inline-block;
height: 100%;
max-width: 700px;
padding: 0 2em;
font-size: 14px;
white-space: normal;
overflow: hidden;
vertical-align:top;
}
You can make it grow automatically. Instead of a set width i.e. width: 6000px; you can use width: max-content; and it will scale automatically to fit horizontally with your content.
height:100%;
width: max-content;
overflow-y:hidden; #optional if you want to lock down height.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
