Develop Reference

How to hide element overflow using CSS?

I am trying to make the front end for a very simple chat box using javascript, css, and html.
I have a element overflow issue when user resizes the window, if the chat is greater than 12 messages, the messages overflow from the container.
I made a jsfiddle so you guys can try for yourself: https://jsfiddle.net/fb72uwwq/6/
In the fiddle, click the chat button and spam messages, resize your browser and you can see they overflow.
I tried some stack overflow answers but overflow: hidden; did not work. How can I solve this?

css
#chat{
height: 100% !important;
overflow-y: hidden;
/* if you want to scroll on overflow, you can use overflow-y: scroll; or overflow-y: auto; */
}

Setting height to 100% should resolve the issue.
c.style.height = "100%";

overflow: hidden will not work because you're not placing the messages inside the container at all. Instead, you're stacking them with absolute positioning and calculated bottom-margin as its sibling. With your current markup, there's no way to cut off the messages at top, unless you also want to calculate that by hand.
Also, your question is not very clear: do you want to stop adding messages once it's outside the container or you just want to crop them off the screen (but they'd still be visible in the DOM).
Either way, your current structure can be much improved if you create it the following way:
<div id=chat>
<input type=text id=chat-message>
<div class=message>First message</div>
<div class=message>Second message</div>
<div class=message>Third message</div>
</div>
This way, all you have to do to make them appear like you want it to use Flexbox:
#chat {
display: flex;
flex-direction: column-reverse; /* from bottom to top */
}
Your JavaScript will also be much simpler, since you'll just be creating a new element as the last child of #chat, meaning no additional calculations. (You can still remove the oldest messages after a certain amount of messages have appeared on the screen).

How can I add a scroll bar to a fixed sidebar that only appears on hover

I'm working on a site where I made the sidebar to be fixed on the left and extended to the full height of the page using this CSS:
sidebar {
position: fixed;
top: 0;
bottom: 0;
}
And that works fine to keep the sidebar in place, but the problem is when the page is re-sized to a smaller height, you can only see the stuff at the top of the sidebar and there's no way to see the stuff at the bottom of the sidebar.
Now, I know I can add a scroll bar using overflow-y: scroll; but what I'm trying to do is have a scroll bar that only appears when the content on the sidebar exceeds the height of the window and only appears on hover. I also want the scroll bar to have some style to it, similar to the sidebar on TheNextWeb or the Facebook chat sidebar.
I know I need some JavaScript to do this, but my skills in JavaScript are very limited so I appreciate any help on this.

overflow-y: auto should work:
For styling you should probably search for a good scrollbar-replacement, as scrollbar-styling only works in webkit (http://css-tricks.com/custom-scrollbars-in-webkit/). It's not a trivial thing to do, but fortunately there are some plugins:
http://cubiq.org/iscroll-4
http://jscrollpane.kelvinluck.com/
http://www.yuiazu.net/perfect-scrollbar/
Just to mention a few.
EDIT:
Thanks to sheba, I made some modfications:
.sidebar:hover{
overflow-y: scroll;
}
http://codepen.io/johannesjo/pen/GcLFn

In CKEditor, how do I always turn scrollbars on?

When editing inside CKEditor, I always want the scrollbars to be shown. Is there a way to override the CSS to always show the scrollbars, even if there's nothing lower filling it up?

it should be achievable using CSS.
I have a tool using the CKEditor and I see the body tag of the iframe in which the content is edited has a class .cke_show_borders.
So you can do:
.cke_show_borders {
overflow: scroll;
}
Or to have more detailed control over the vertical/horizontal scrollbars
.cke_show_borders {
overflow-y: scroll; // vertical scrollbar
overflow-x: scroll; // horizontal scrollbar
}

hide scrollbar but able to scroll with mouse

I want to hide scrollbar to appear on a long div,but still able to scroll through mouse or keyboard arrow keys.I read another thread here about scrollable.Tried to use that..but could not implement that...could someone guide me how to implement that clearly or is there any other option with jquery or css?
Any help would be greatly appreciated.
Thanks

I'm not 100% sure on the browser compatibility of this, but you can have two div's - an outer div and a inner div. The inner div will have all your content. Your css could then look like this:
#outer {
width: 200px;
height: 200px;
overflow:hidden;
}
#inner {
height: 200px;
width: 225px;
overflow: scroll;
}
That is, the inner block would be wide enough to contain a scrollbar, but have it hidden from sight by the containing div. This worked for me in webkit. You might have to fiddle with the widths to make sure text doesn't get cut off.
That said, I would carefully think about WHY you're trying to do this. This could be a huge usability issue for your users, as they will not have any indication that there is more content within the div.

To do this is add the following css
.div::-webkit-scrollbar {
display: none;
}
This is saying that hey remove the display of the scroll bar but keep the functionality

Content jumps horizontally whenever browser adds a scrollbar

I'm using a fixed width body and auto margins to center my content in the middle of the page. When the content exceeds the page's height and the browser adds a scrollbar, the auto margins force the content to jump half the width of the scrollbar left.
Is comparing outerHeight with window.innerHeight an appropriate way of solving this? Is there another way to solve this?
I think this should be enough info for the problem, but let me know if I can answer anything else.
Edit for clarification: I don't want to force the scrollbar to appear.

I'll just leave this link here because it seems an elegant solution to me:
https://aykevl.nl/2014/09/fix-jumping-scrollbar
What he does is add this css:
#media screen and (min-width: 960px) {
html {
margin-left: calc(100vw - 100%);
margin-right: 0;
}
}
This will move the content to the left just the size of the scrollbar, so when it appears the content is already moved. This works for centered content with overflow: auto; applied to the html tag. The media query disables this for mobile phones, as its very obvious the difference in margin widths.
You can see an example here:
http://codepen.io/anon/pen/NPgbKP

I've run into this problem myself and I've found two ways to solve it:
Always force the scrollbar to be present:
body { overflow-y: scroll; } Setting it on the html doesn't work in all browsers or might give double scroll bars if the scrollbar does appear.
Add a class that adds ~30 pixels to the right margin of your page if there is no scrollbar.
I've chosen option 1 but I'm not sure if it works in all browsers (especially the older ones).
Facebook uses option 2.

Use this CSS:
body { overflow-y: scroll; }

You can force the scrollbar to always appear:
http://www.mediacollege.com/internet/css/scroll-always.html

The process is :
html {
overflow-y: scroll !important;
}
This will show the scrollbar even there no need any scroll bar.

Best possible way through CSS, It will show/hide Scrollbar accordingly, will
solve jump problem, works on every browser
html {
overflow: hidden;
}
body {
overflow-y: auto;
-webkit-overflow-scrolling:touch;
}

For me, the solution was to add this rule to the body:
body {
overflow-anchor: none;
}
This rule was added recently, and aims to reduce the variability of browsers having different default assumptions about how they should react to overflowing. Chrome, for example, has overflow anchoring enabled by default, whereas Firefox does not. Setting this property will force both browsers to behave the same way.
https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-anchor