The bottom padding on scrolling a fixed height div is ignored in firefox

Question

I have a div with a fixed height and padding attribute. I set overflowin autoso that the browser adds scrollbars. I want to be able to scroll down until the entire lower pad is visible, but it is fully truncated.

Here is the violin

CSS

#content {
    padding: 40px;
    width: 250px;
    background-color: #ccc;
    overflow: auto;
}

HTML:

<div id="content">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>

Edit: I found out that this only works incorrectly in Firefox (29.0.1 for me)

Answer 1

You can use the fields instead of filling, wrap the text in paragraph tags and change its width to accommodate the difference. Look here

#content, #content2 {
   width: 330px;
   background-color: #ccc;
   overflow: auto;
}

#content {
   height: 200px;
   float:left;
}
p {
   margin: 40px;
}