Just set your width to auto: #myWorkContent{ width: auto; height:210px; border: 13px solid #bed5cd; overflow-x: scroll; overflow-y: hidden; white-space: nowrap; } This way your div can be as wide as possible, so you can add as many kitty images as possible ;3 Your div’s width will expand based on the child elements it contains. jsFiddle
You cannot, that is written in the spec. Have a look here : https://stackoverflow.com/a/6433475/1343096 Since it is written in the spec, I am 99% sure that it is impossible to do.
I figured it out! The parent should be overflow:auto; The .child should be position:relative; The .child-menu should be position:fixed; with NO top or left positioning. If you do this, it will keep it it inline with the content. If you need to move the child-menu use margins and not top or left. Example margin-left:-100px; EDIT … Read more
Sadly IE6 doesn’t so you have to use an expression for IE6, then set the max-height for all other browsers: div{ _height: expression( this.scrollHeight > 332 ? “333px” : “auto” ); /* sets max-height for IE6 */ max-height: 333px; /* sets max-height value for all standards-compliant browsers */ overflow:scroll; } Overflow:auto would most likely work … Read more
Rather than a performance issue this is likely that your not seeing ‘Momentum’ scrolling on your iOS device This can be solved by adding ‘-webkit-overflow-scrolling:touch’ to your scrolling element i.e: .scrolling-content { overflow-y: scroll; -webkit-overflow-scrolling: touch; height:100%; /*A value other than height:auto needs to be set*/ } By default iOS devices use ‘momentum’ scrolling on … Read more
Bounce scroll in the browser is a feature of some versions of iOS / macOS. To prevent it from happening on a website we can use the following: CSS html, body { height: 100%; overflow: hidden; } #main-container { position: absolute; top: 0; bottom: 0; left: 0; right: 0; overflow: auto; } HTML <body> <div … Read more
Update, May 29 Doh! I so stupid. The below, while true…ish doesn’t address the question well enough. If you want that configuration of the rotation to stay the same as you have illustrated, add a div between .scroll and .el, and style it such: {perspective:300px;} Thus, it would seem that you want the .pers div … Read more
You could simply set the container to flexbox. #cont { padding: 5px; background-color: red; max-height: 150px; max-width: 50%; display: flex; /*added*/ flex-direction: column; /*added*/ } jsFiddle #cont { padding: 5px; background-color: red; max-height: 150px; max-width: 50%; display: flex; /*added*/ flex-direction: column; /*added*/ } #body { background-color: blue; overflow-y: auto; overflow-x: hidden; flex: 1; /* added … Read more
Possible values for overflow are: visible hidden auto scroll See here or here for a discussion of these. Using any other value in different browsers will yield unpredictable results as they handle the incorrect value differently. Edit: Following the comment, I’ve managed to find mention of overflow:overlay here. overlay is described as: Content is clipped … Read more
Add the following code to your stylesheet: table { white-space: nowrap; }