我是否可以通过纯CSS制作一个元素的内容宽度？

Question

我需要使一个元素是它的内容的全部宽度。

我在用whitespace:no-wrap和display: inline-block;做类似的事情，但这是滚动效果。现在，我需要元素是其内容的实际宽度；而不是滚动来查看它们(因为对于具有滚动效果的某个JS解决方案，我需要一个带有单个全宽度内容项的包装器)。

我的设置如下(其中#content应该是全宽度)：

​

#wrapper {
  width: 500px;
  height: 100px;
  background-color: red;
  overflow-x: scroll;
}
#content {
  white-space: nowrap;
  
  /* this is a false solution, since the contents must be variable */
  width: 1000px;
  /* this is a false solution, since the contents must be variable */
  
  background-color: blue;
}
.inner_item {
  display: inline-block;
  width: 250px;
  height: 100px;
  background-color: green;
}

<div id="wrapper">
  <div id="content">
    <!-- this should be as wide as all of its contents combined -->
    <div class="inner_item"></div>
    <div class="inner_item"></div>
    <div class="inner_item"></div>
    <div class="inner_item"></div>
  </div>
</div>

​

(如何)可以通过纯CSS使元素的内容宽度？

澄清：

包装子内容项的#content元素实际上应该溢出其父容器的边缘，而不是滚动其内部内容。因此，如果#内容中有5x1000px宽的条目，并且我使用$('#content').width()，我应该得到5000。这就是我想要达到的目标。

Answer 1

有些规格在你的问题不是很清楚，但这似乎是什么，你可以寻找。

#wrapper, #wrapper * {
    border:0;
    margin:0;
    padding:0;
}
#wrapper {
    background-color:red;
    height:100px;
    overflow-x:scroll;
    width:500px;
}
#content {
    display:inline-block;
    height:100px;
    background-color:blue;
    white-space:nowrap;
}
.inner_item {
    display:inline-block;
    width:250px;
    height:100px;
    background-color:green;
}
.inner_item:first-child {
    margin-left:0;
}

小提琴：

这里有一个JSFiddle供参考。

Answer 2

将下列样式应用于元素#content

#content{
    white-space: nowrap;
    overflow:auto;
    background-color:blue;
}

您还可以按照@Rooster的建议从#wrapper中删除#wrapper

检查jsFiddle演示