将父 DIV 扩展到溢出内容宽度

Question

我已经读过很多与我类似的问题，但没有一个是完全相同的，或者有一个适合我的答案。

我正在使用 Twitter Bootstrap 3。我有两行，每行包含一个col-sm-12div，所以它们的宽度相同。第一行中的内容比其容器宽，但我overflow:auto包含两行的元素上设置，因此显示水平滚动条，并且可以使用它看到内容，所以这很好。

在第二行中，我有一个div，我正在应用一个jQuery插件(jqxGrid，因为它的价值)。我已将插件的width选项设置为"100%"。生成的网格的内容对于其容器来说也太宽了，但由于 jQuery 插件创建网格的方式，它将网格的宽度限制为其父宽度的 100%，而不是溢出。

所以我真正需要的是让.row元素都与最宽的溢出内容一样宽，这样当 jQuery 插件评估其父级的宽度以设置自己的宽度时，生成的网格最终与第一行中的溢出内容一样宽。

我做了一个小提琴，希望能说明这个问题。我觉得从本质上讲，这是一个CSS问题，所以一个纯粹的CSS解决方案会很好，但我怀疑这是否可能。

.wrapper {
color: #fff;
padding: 10px;
}
.container-fluid {
background-color: #333;
overflow: auto;
}
.row1 {
background-color: yellow;
}
.row2 {
background-color: orange;
}
.short-content {
background-color: red;
width: 100%;
}
.long-content {
width: 2000px;
background-color: blue;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="wrapper">
<div class="container-fluid">
<div class="row row1">
<div class="col-sm-12">
<div class="long-content">
Long content
</div>
</div>
</div>
<div class="row row2">
<div class="col-sm-12">
<div class="short-content">
THe jQuery plugin here is too wide to fit but won't overflow because its width is set to match its parent.
</div>
</div>
</div>
</div>
</div>

Answer 1

据我了解，将每个.col-sm-12包装到它们自己的父.row中是一种将所有.col-sm-12放在一个.row容器中的冗长方式，因为.col-sm-12总是换行到一个新行中。

因此，如果您的设置允许删除中间.row标签，您必须编写的唯一额外的 css 行是float: left;在.row上。(在下面的示例中，我使用了.container-fluid上的 id#custom，将此修改与页面的其余部分隔离开来)。

body {
color: #fff;
padding: 10px;
}
.container-fluid {
background-color: #333;
overflow: auto;
}
.row1 {
background-color: yellow;  
}
/*.row2 {
background-color: orange;
}*/
.short-content {
background-color: red;
width: 100%;
}
.long-content {
width:2000px;
background-color: blue;
}
#custom .row {
float: left;
}

<div id="custom" class="container-fluid">
<div class="row row1">
<div class="col-sm-12">
<div class="long-content">
Long content
</div>
</div>
<!-- </div> -->
<!-- <div class="row row2"> -->
<div class="col-sm-12">
<div class="short-content">
THe jQuery plugin here is too wide to fit but won't overflow because its width is set to match its parent.
</div>
</div>
</div>
</div>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>