min-width y max-width se ignoran cuando el elemento tiene display: table-cell

Question

Estoy tratando de hacer un diseño fluido simple usando CSS tables technique, pero hay un gran defecto que he encontrado en él: min-width y max ancho se ignoran en elementos con visualización de celda de tabla.

¿Conoces alguna solución alternativa que me permita especificar qué tan lejos se puede estirar el elemento #sidebar en el siguiente ejemplo?

XHTML:

<div id="wrapper"> 

    <div id="main"> 
    </div> 

    <div id="sidebar"> 
    </div> 

</div> 

CSS:

#wrapper { 
display: table-row; 
border-collapse: collapse; 
} 

    #main { 
    display: table-cell; 
    } 

    #sidebar { 
    display: table-cell; 
    width: 30%; 
    min-width: 100px; /* does not work! */ 
    max-width: 310px; /* does not work! */ 
    } 

Answer 1

Si usted está tratando de hacer una barra lateral y la configuración principal, el uso float: left lugar de la tabla fila y celda de la tabla. Luego puedes poner tu min-width en la identificación.

Answer 2

Añadir otra envoltura interior de cada Div:

<div id="wrapper"> 

    <div id="main"> 
    <div class="inner"></div> 
    </div> 

    <div id="sidebar"> 
    <div class="inner"></div> 
    </div> 

</div> 

y poner el *-width declaraciones sobre ellos:

#sidebar div.inner { 
    min-width: 100px; 
    max-width: 300px; 
} 

Answer 3

Estoy buscando en el diseño de respuesta para un sitio que muestra izquierda -> derecha y hacia abajo y quiero lograr un mínimo de ancho yo mismo. Haciendo un poco de investigación, creo que esto podría responder a esta pregunta.

https://css-tricks.com/almanac/properties/m/max-width/