Css 将最小宽度设置为内容的宽度

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

.my div{
宽度：100%；
最小宽度：900px；
}

对于900px宽的表来说，这很好，但是如果它比这个窄，我会有不需要的滚动条，如果它比这个宽，我会有无法访问的内容。显然，这可以用JavaScript轻松解决，但我想知道是否有一个只使用CSS的解决方案，这样我的应用程序就不会那么重JS了

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

如何

.my div{
溢出：自动；
}
桌子{
浮动：左；
}

---

现场演示：

如果我正确理解您的问题，这将有助于：

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

此处修改了您的示例：

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

您只需将一个表包装在一个表中，这样它们都会溢出

.my div{
宽度：100%；
高度：400px；
显示：表格；
背景色：#bada55；
}
运输署{
空白：nowrap；
}
桌子{
宽度：100%；
}

我的桌子
我的数据aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

尝试使用此解决方案

.my div{
高度：400px；
溢出：自动；
背景色：#bada55；
}
运输署{
空白：nowrap；
}
桌子{
宽度：100%；
}

我的桌子
我的桌子
我的数据aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

有一个草稿，其中添加了

宽度：适合内容

，它完全符合您的要求。IE/Edge不支持它。

是相对于视口宽度的100%宽度吗？我不知道这是什么意思。我希望

.my div

的宽度等于

document.body.offsetWidth

视口是浏览器中显示网页的区域。默认情况下，

元素的宽度与视口的宽度相同。因此DIV应溢出视口？是的，我希望DIV仅在其内部的表格比视口宽时溢出视口。直到运行时我才知道表的宽度。这使得

.my div

水平滚动。我更喜欢整个窗口滚动。