强制显示:表元素不超出父元素宽度

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.

如何防止这种情况并保持.table100%父元素的最大宽度？(max-width不工作).

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

Answer 1

非常简单:

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

你需要两件事:

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