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

Question

我读过 a few questions，但 none 完全相同或有适合我的答案。

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

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

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

I've made a fiddle 希望能说明问题。我觉得这在本质上是一个 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-12s 总是换行。

因此，如果您的设置允许删除中间的 .row 标签，您唯一需要编写的 css 行是 .row 上的 float: left;。（在下面的示例中，我在 .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"/>

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

Expand parent DIV to overflowing content width

css

twitter-bootstrap

jqxgrid