Menu
I have the following markup
<style type="text/css">
#outer
{
min-height: 100%;
height: auto !important;
height: 100%;
width:100%;
white-space:nowrap;
}
#inner
{
background-color:#CCCCCC;
margin:0px 4px 0px 4px;
padding:5px 5px 0px 5px;
border:1px solid #9A9A9A;
border-width:1px 1px 0px 1px;
}
</style>
<div id="outer">
<div id="inner">
TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST
</div>
</div>
When the browser is wide enough, it looks like this
When the browse is resized narrow, it looks like this
I want the gray background of the narrow view to extend all the way to the right when I scroll. What about my markup and css is causing this unwanted effect (occurs in Chrome, FF3 and IE8)
942
To hide the horizontal scrollbar and prevent horizontal scrolling, use overflow-x: hidden: HTML.
To change this, set the min-width or min-height property.” This means that a flex item with a long word won't shrink below its minimum content size. To fix this, we can either use an overflow value other than visible , or we can set min-width: 0 on the flex item.
nowrap : Multiple whitespaces are collapsed into one, but the text doesn't wrap to the next line.
To enable horizontal scrolling, we can use the CSS property overflow-x. If we assign the value scroll to the overflow-x property of the container element, the browser will hide horizontally overflowing content and make it accessible via horizontal scrolling.
An easy solution is to do this: on #outer, remove width: 100% and add float: left.
Live Demo
184
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
