Sin relleno cuando se usa el desbordamiento: automático

no puedo conseguir padding-bottom para trabajar cuando uso overflow-y: auto en una caja Yo uso Firefox.

#container {
  padding: 3em;
  overflow-x: hidden;
  overflow-y: auto;
  width: 300px;
  height: 300px;
  background: red;
}

#some_info {
  height: 900px;
  background: #000;
}

<div id="container">
  <div id="some_info"></div>
</div>

Ver el JSFiddle.

Una solución más sin DIV adicionales.

#container:after {
  content: "";
  display: block;
  height: 50px;
  width: 100%;
}

Trabajando en FF, Chrome, IE8-10.

Llegué tarde a la fiesta, pero pensé que valía la pena agregar una solución diferente que aborde algunas de las inquietudes planteadas anteriormente.

Vine aquí exactamente por el tipo de situación que planteó @Philip en respuesta a la solución de Alexandre Lavoie: tengo contenido generado dinámicamente dentro del contenedor, por lo que no puedo simplemente aplicar estilo a un nombre div específico como #some_info.

Afortunadamente, existe una solución simple para los navegadores que admiten CSS3: en lugar de aplicar relleno inferior al contenedor, aplique un margen inferior al último elemento secundario dentro del contenedor.

#container > :last-child {
    margin-bottom: 3em;
}

Siempre que el último elemento secundario en el contenedor div sea un elemento de nivel de bloque, esto debería funcionar.

MANIFESTACIÓN: http://jsfiddle.net/rwgZu/240/

PD Si la falla de Firefox para desplazarse hasta la parte inferior del relleno es realmente un error (como lo sugiere @Kyle), todavía no se ha solucionado a partir de Firefox 47.0. ¡Frustrante! Internet Explorer 11.0.9600.17843 exhibe el mismo comportamiento. (Google Chrome, por el contrario, muestra el relleno inferior como se esperaba).

Las soluciones anteriores no funcionaban para mis necesidades, y creo que encontré una solución simple.

Si su contenedor y el contenido desbordado comparten el mismo color de fondo, puede agregue un borde superior e inferior con el color que coincida con el color de fondo. Para crear un relleno igual alrededor, establezca el ancho del borde igual al relleno izquierdo y derecho del contenedor.

Enlace a la versión modificada del violín de OP: http://jsfiddle.net/dennisoneil/rwgZu/508/

Un ejemplo simple a continuación.

Nota: Stack Overflow pone los resultados del fragmento en un pergamino de desbordamiento, lo que hace que sea un poco más difícil ver lo que está pasando. El violín puede ser su mejor opción de vista previa.

#container {
  background: #ccc;
  overflow-y: scroll;
  height: 190px;
  padding: 0 20px;
  border-top: 20px solid #ccc;
  border-bottom: 20px solid #ccc;
}
#overflowing {
  background: #ccc;
}

<div id="container">
  <div id="overflowing">
    This is content<br/>
    This is content<br/>
    This is content<br/>
    This is content<br/>
    This is content<br/>
    This is content<br/>
    This is content<br/>
    This is content<br/>
    This is content<br/>
    This is content<br/>
    This is content<br/>
    This is content<br/>
    This is content<br/>
    This is content<br/>
    This is content<br/>    
  </div>
</div>

Aquí hay un posible enfoque que funciona perfectamente:

#container {
    overflow-x: hidden;
    overflow-y: auto;
    width: 300px;
    height: 300px;
}

#some_info {
    height: 900px;
    background: #000;
    border: 3em solid red;
}

Diseñe el div principal normalmente y haga que el div interno haga lo que usted quiere que haga.

Remover overflow-x y overflow en #containercambio height a 100% y añadir overflow-y:scroll; en #some_info

#container {
    padding: 3em;
    width: 300px;
    height: 300px;
    background: red;
}

#some_info {
    height: 100%;
    background: #000;
    overflow-y:scroll;
    width:100%;
}

Demostración de trabajo: http://jsfiddle.net/9yuohxuh/

Para aquellos que buscan una solución simple y pueden cambiar el DOM, pongan el overflow en el elemento exterior y el padding en el elemento interior.

.scroll {
    overflow-x: hidden;
    overflow-y: auto;
}

.scroll__inner {
    padding: 3em;
}

En el ejemplo de la pregunta original, se vería así:

#container {
    overflow-x: hidden;
    overflow-y: auto;
    width: 300px;
    height: 300px;
    background: red;
}

#some_info {
    height: 900px;
    background: #000;
    padding: 3em;
    box-sizing: border-box; /* only needed if wanting padding to not be added to height */
}

Nótese el uso de box-sizing: border-box aquí, que solo es necesario ya que el OP tiene una altura codificada (generalmente una mala práctica, pero podría ser necesaria en casos extremos), por lo que agregar esto border-box habilita el 3em acolchado para no aumentar la altura, sino almohadilla dentro del 900px.

Una nota final, recomendaría evitar las identificaciones para diseñar, principalmente debido a su especificidad extremadamente alta, ver esta publicación para más información sobre eso.

Manifestación

Hola, ahora estoy acostumbrado a este css.

#container {
    padding: 3em;
    overflow-x: hidden;
    overflow-y: auto;
    width: 300px;
    height: 300px;
    background: red;
    padding-bottom:0; // add this line in your css
}

#some_info {
    height: 900px;
    background: #000;
    margin-bottom:3em; // add this line in your css
}

Manifestación