Force display: table element to not overstep parent element width - css

Question

How can I prevent the display: table element overstepping its parent element width?
Here is a jsFiddle of the below:
.container {
max-width: 150px;
padding: 5px;
border: 2px solid #0f0;
}
.table {
display: table;
border: 1px solid #00f;
max-width: 100%;
}
.cell {
display: table-cell;
}
.cell:nth-child(2) {
background: #f00;
}
<div class="container">
<div class="table">
<span class="cell">
<select>
<option>long long long long long desc</option>
</select>
</span>
<span class="cell">A</span>
</div>
</div>
In effect, the .table element is wider than .container.
How can I prevent that and keep max-width of .table 100% of parent element? (max-width is not working).
I'm looking for pure CSS solution.

Answer 1

Very simple:
Demo http://jsfiddle.net/zpfLxkrh/3/
you need two things:
.table{
table-layout: fixed;
width: 100%;
}
select {
max-width: 100%;
}

Answer 2

The problem is not your display: table div... it is your select.
If you want to keep that width, make it behave!
select {
width: 100%;
}
Example
The select size will now be controlled by its cell size. I have changed the cell sizes to 50% to illustrate this.
.container {
max-width: 150px;
padding: 5px;
border: 2px solid #0f0;
}
.table {
display: table;
border: 1px solid #00f;
max-width: 100%;
}
.cell {
display: table-cell;
width: 50%;
}
.cell:nth-child(2) {
background: #f00;
}
select {
width: 100%;
}
<div class="container">
<div class="table">
<span class="cell">
<select>
<option>long long long long long desc</option>
</select>
</span>
<span class="cell">A</span>
</div>
</div>