max-width not working for table-cell

Question

For me, the expected behavior would be that the middle cell fills the whole space horizontally as long as its container is not wider than 500px. However, it doesn't matter how large I scale the page, the middle cell always fills up 100%, ignoring the max-width property, and the 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 guess the reason is quite clear to you now, so i am just going to suggest you a workaround to this. By using display:block/inline-block; instead of display:table/table-cell;.

So the solution is:

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 : Fiddle

Updated Solution:

Found a solution

Going back to tables would work by giving table-layout:fixed; to 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 shouldn't be used for table cells as

In CSS 2.1, the effect of 'min-width' and 'max-width' on tables, inline tables, table cells, table columns, and column groups is undefined.

Waiting for workarounds...