将 min-width 设置为内容的宽度答案

【问题标题】：Set min-width to width of contents将 min-width 设置为内容的宽度
【发布时间】：2012-07-20 15:11:48
【问题描述】：

我有一个带有背景的 div，其中包含一个表格。我希望 div 具有 100% 的宽度，除非它比表格的长度窄。我可以这样做：

.my-div {
  width:100%;
  min-width:900px;
}

这对于 900 像素宽的表格来说非常好，但如果它比这窄，我将有不需要的滚动条，如果它比这宽，我将有无法访问的内容。显然，这可以用 JavaScript 轻松解决，但我想知道是否有纯 CSS 解决方案，所以我的应用程序不是那么 JS-heavy。

要查看正在发生的事情，请参阅here。我想要的是当表格中的文本溢出时，绿色背景会溢出视口。

【问题讨论】：

100% 宽度是否与视口宽度有关？
我不知道那是什么意思。我希望.my-div 的宽度等于document.body.offsetWidth
视口是浏览器中显示网页的区域。 <body> 元素的宽度默认与视口的宽度相同。
所以DIV应该溢出视口？
是的，我希望 div 仅在其中的表格比视口宽时才溢出视口。直到运行时我才知道表格的宽度。

标签： css responsive

【解决方案1】：

怎么样...

.my-div {
    overflow: auto;    
}

table {
    float: left;
}

现场演示： http://jsfiddle.net/WTwdN/4/

【讨论】：

这使.my-div 水平滚动。我希望滚动整个窗口。

【解决方案2】：

如果我正确理解您的问题，这应该会有所帮助：

.my-div {
  /*width:100%;*/
  height:400px;
  background-color:#bada55;
  display: inline-block; // this is the key
}

您的示例在此处修改：http://jsfiddle.net/nvLnodLh/

【讨论】：

【解决方案3】：

我想要的是当表格中的文本溢出时，绿色背景会溢出视口。

您只需将一个表包装在一个表中，因此它们都会溢出。

.my-div {
  width:100%;
  height:400px;
  display: table;
  background-color:#bada55; 
}
td {
  white-space:nowrap;
}
table {
  width: 100%;
}

<div class="my-div">
  <table>
      <thead>
          <tr><td>my table</td></tr>
      </thead>    
      <tbody>
          <tr><td>my dataaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaapppppppppppppppp</td></tr>              
      </tbody>
  </table>
</div>

如果您不希望容器 div 变得比视口大，只需在桌子上设置背景即可。

.my-div {
  width:100%;
  height:400px;
}
table {
  height: 100%;
  width: 100%;
  background-color:#bada55; 
}
td {
  white-space:nowrap;
  vertical-align: top;
}

<div class="my-div">
  <table>
      <thead>
          <tr><td>my table</td></tr>
      </thead>    
      <tbody>
          <tr><td>my dataaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaapppppppppppppppp</td></tr>              
      </tbody>
  </table>
</div>

【讨论】：

【解决方案4】：

试试这个解决方案

.my-div {
  height:400px;
  overflow: auto;
  background-color:#bada55;    
}
td {
  white-space:nowrap;   
}
table {
  width: 100%;
}

<div class="my-div">
  <table>
      <thead>
          <tr><td>my table</td>
          <td>my table</td></tr>
      </thead>    
      <tbody>
          <tr><td>my dataaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaapppppppppppppppp</td><td>my dataaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaapppppppppppppppp</td></tr>              
      </tbody>
  </table>
</div>

【讨论】：

【解决方案5】：

CSS Intrinsic & Extrinsic Sizing Module Level 3 的草稿添加了 width: fit-content，这正是您想要的。 IE/Edge 不支持它。

【讨论】：