Expand parent DIV to overflowing content width

Question

I've read quite a few similar questions to mine but none is quite the same or has an answer which works for me.

I'm using Twitter Bootstrap 3. I have two rows, and each row contains a col-sm-12 div, so they're the same width. The content in the first row is wider than its container but I have overflow:auto set on the element containing the two rows so a horizontal scrollbar is displayed and the content can be seen using that, so that's fine.

In the second row I have a div to which I'm applying a jQuery plugin (jqxGrid, for what it's worth). I've set the width option of the plugin to be "100%". The resultant grid's content is also too wide for its container but because of the way the jQuery plugin creates the grid it constricts the grid's width to 100% of its parent's width rather than overflowing.

So what I really need is for the .row elements to all be as wide as the widest overflowing content so that when the jQuery plugin evaluates the width of its parent so as to set its own width, the resultant grid ends up being as wide as the overflowing content in the first row.

I've made a fiddle which I hope will illustrate the problem. I feel that at its heart this is a CSS problem so a pure CSS solution would be excellent, but I doubt that that's possible.

.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>

I would upgrade to bootstrap 4. They have a new class `col-auto`. I believe this will give you what you are looking for. If bootstrap 4 is not an option, I would create my own grid using flexbox. — David Lee, Feb 02 '18 at 17:24
Unfortunately upgrading to Bootstrap 4 isn't an option at the moment. I've had a little play with trying to achieve this using flexbox instead of a Boostrap grid, but flex children will still only expand to fill their parent, regardless of whether a sibling has overflowing content, although this does at least cause the element with overflowing content to expand to contain it. https://jsfiddle.net/philipstratford/a7a824ge/ — Philip Stratford, Feb 02 '18 at 18:10
@PhilipStratford Is it possible to have each row in its own container? — David Lee, Feb 02 '18 at 21:07
@DavidLee Not sure if you're asking as the precursor to a possible solution or just suggesting that I use a different `display:flex` container for each row, but in either case the answer is yes! However, I've just tried the latter and didn't have any joy. — Philip Stratford, Feb 03 '18 at 11:14

score 1 · Accepted Answer · answered Feb 03 '18 at 22:54

To my understanding, wrapping each .col-sm-12 into their own parent .row is a verbose way of having all .col-sm-12 in a single .row container, as .col-sm-12s are always wrapping into a new line.

So, in case your setup allows for removing the intermediate .row tags, the only additional line of css you have to write is float: left; on .row. (In the example below I used the id #custom on .container-fluid to isolate this modification from the rest of your page).

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"/>

Expand parent DIV to overflowing content width

1 Answers1