css - 强制显示: table element to not overstep parent element width

Question

如何防止 display: table 元素超出其父元素的宽度？

这是一个jsFiddle以下:

.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>

实际上，.table 元素比 .container 更宽。

如何防止这种情况发生并保持 .table 的最大宽度为父元素的 100%？ (max-width 无效)。

我正在寻找纯 CSS 解决方案。

Answer 1

非常简单:

演示 http://jsfiddle.net/zpfLxkrh/3/

你需要两件事:

.table{
    table-layout: fixed;
    width: 100%;
}
select {
    max-width: 100%;
}