Max-width does not work for cell table

Question

For me, the expected behavior would be that the middle cell fills the entire space horizontally if its container is not wider than 500 pixels. However, no matter how large I scale the page, the middle cell always fills 100%, ignoring the max-width property, and chocolate never shows :(

div.container { width: 100%; display: table; } div.container > * { display: table-cell; } div.middle { width: 100%; max-width: 500px; background-color: black; } div.side { width: auto; background-color: chocolate; } 

 <div class="container"> <div class="side"></div> <div class="middle">.</div> <div class="side"></div> </div> 

What causes the problem and what could be a workaround?

Answer 1

I think the reason for you is now clear enough, so I'm just going to offer you a workaround to this. Using display:block/inline-block; instead of display:table/table-cell; ,

So the solution is this:

 div.container { width: 100%; display: block; /* Changed from display:table; */ } div.container > * { display: inline-block; /* Changed from display:table-cell; */ float:left; /* Added floating to avoid space between elements */ } div.middle { width: 100%; max-width: 500px; background-color: black; } div.side { width: auto; background-color: chocolate; } 

 <div class="container"> <div class="side">Left</div> <div class="middle">.</div> <div class="side">Right</div> </div> 

Working: violin

Updated solution:

Found a solution

Returning to the tables would work by specifying table-layout:fixed; into the container .

Working demo

HTML

 <div class="container"> <div class="side">Left</div> <div class="middle">.</div> <div class="side">Right</div> </div> 

CSS

 html, body { width:100%; height:100%; margin:0; padding:0; } .container { display:table; width:100%; height:10px; table-layout:fixed; } .side, .middle { display:table-cell; text-align:center; vertical-align:middle; } .middle { width:500px; background:black; } .side { width : calc(50% - 500px); overflow:hidden; background:chocolate; } @media (max-width: 500px) { .side { display:none; } .middle { width:100%; } } 

Answer 2

Thanks Aziz, now I know that max-width should not be used for table cells as

In CSS 2.1, the effects of "min-width" and "max-width" on tables, embedded tables, table cells, column columns, and undefined column groups.

Waiting for workarounds ...

Answer 3

Use max-width , min-width with table set

 table { width: 100%; table-layout: fixed; } 

See fooobar.com/questions/104312 / ...