Force display: table element to not overstep parent element width

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>