min-width i max-width są ignorowane, gdy element ma display: table-cell

Question

Próbuję zrobić prosty układ płynów przy użyciu CSS tables technique, ale jest jedna wielka wada, którą znalazłem w nim: min-width i max -width są ignorowane na elementach z wyświetlaniem komórek tabeli.

Czy znasz jakieś obejście, które pozwoliłoby mi określić, jak daleko # element pasków może rozciągać się w poniższym przykładzie?

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

Jeśli jesteś po prostu staramy się robić pasek boczny i główny Setup, za pomocą pływaka: lewy zamiast table-row i table-cell. Następnie możesz umieścić swoją min-szerokość na id.

Answer 2

Dodaj kolejny opakowanie wewnątrz każdej Gr:

<div id="wrapper"> 

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

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

</div> 

i umieścić deklaracje *-width na nich:

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

Answer 3

Patrzę na elastyczne projektowanie dla strony, która wyświetla lewo -> prawo, potem w dół i chcę osiągnąć minimalną szerokość osobiście. Trochę badań Myślę, że to może odpowiedzieć na to pytanie.

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