Set min-width to width of contents

Question

I have a div with a background that contains a table. I want the div to have 100% width, except when that is narrower than the table is long. I can do something like this:

.my-div {
  width:100%;
  min-width:900px;
}

That's great for a table that is 900px wide, but if it is narrower than that, I will have unwanted scrollbars and if it is wider than that, I will have content that is unreachable. Obviously, this can trivially be solved with JavaScript, but I want to know if there is a CSS-only solution, so my application isn't so JS-heavy.

For a visual of what's happening, see here. What I want is for the green background to overflow the viewport when the text in the table does.

I don't know what that means. I want the width of `.my-div` to be equal to `document.body.offsetWidth` — Joshua Clark, Jul 21 '12 at 18:12
The viewport is the area of the browser in which the web-page is displayed. The width of the `` element is by default the same as the width of the viewport. — Šime Vidas, Jul 21 '12 at 18:15
Yes, I would like the div to overflow the viewport only when the table inside of it is wider than the viewport. I won't know the width of the table until runtime. — Joshua Clark, Jul 21 '12 at 18:24
Is the visitor able to scroll the table/DIV horizontally? If yes, on which element is the scroll bar set? — Šime Vidas, Jul 21 '12 at 18:25
Correction: I removed the `overflow: hidden` that someone added to the table and now there is a horizontal scrollbar, but the table spills outside the containing div. See the jsfiddle example. — Joshua Clark, Jul 21 '12 at 18:39
The HTML code of your demo is invalid. It should be `` instead of ``. — Šime Vidas, Jul 21 '12 at 18:45
Thanks, I fixed that, but it's not really the point. The problem persists. I think I just need to use JavaScript — Joshua Clark, Jul 21 '12 at 18:48
Maybe there is a problem with word wrapping. Check this out @JoshuaClark: [Word-wrap in an HTML table](https://stackoverflow.com/questions/1258416/word-wrap-in-an-html-table?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa) — syp_dino, May 18 '18 at 08:38

score 11 · Answer 1 · answered May 17 '18 at 15:30

11

If I understand your problem correctly, this should help:

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

Your example modified here: http://jsfiddle.net/nvLnodLh/

answered May 17 '18 at 15:30

Tamas Szoke

5,426
4
24
39

score 2 · Answer 2 · edited Jul 21 '12 at 22:25

2

How about...

.my-div {
    overflow: auto;    
}

table {
    float: left;
}

Live demo: http://jsfiddle.net/WTwdN/4/

edited Jul 21 '12 at 22:25

Nikola K.

7,093
13
31
39

answered Jul 21 '12 at 18:49

Šime Vidas

182,163
62
281
385

This makes `.my-div` scroll horizontally. I would prefer the whole window to scroll. – Joshua Clark Jul 21 '12 at 18:59

CyberAP · Answer 3 · 2018-05-18T19:26:18.417

What I want is for the green background to overflow the viewport when the text in the table does.

You just wrap a table inside a table, so they both overflow.

.my-div {
  width:100%;
  height:400px;
  display: table;
  background-color:#bada55; 
}
td {
  white-space:nowrap;
}
table {
  width: 100%;
}

<div class="my-div">
  <table>
      <thead>
          <tr><td>my table</td></tr>
      </thead>    
      <tbody>
          <tr><td>my dataaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaapppppppppppppppp</td></tr>              
      </tbody>
  </table>
</div>

If you don't want your container div to grow bigger than viewport just set the background on the table.

.my-div {
  width:100%;
  height:400px;
}
table {
  height: 100%;
  width: 100%;
  background-color:#bada55; 
}
td {
  white-space:nowrap;
  vertical-align: top;
}

<div class="my-div">
  <table>
      <thead>
          <tr><td>my table</td></tr>
      </thead>    
      <tbody>
          <tr><td>my dataaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaapppppppppppppppp</td></tr>              
      </tbody>
  </table>
</div>

score 1 · Answer 4 · answered May 23 '18 at 08:45

Try with this solution

.my-div {
  height:400px;
  overflow: auto;
  background-color:#bada55;    
}
td {
  white-space:nowrap;   
}
table {
  width: 100%;
}

<div class="my-div">
  <table>
      <thead>
          <tr><td>my table</td>
          <td>my table</td></tr>
      </thead>    
      <tbody>
          <tr><td>my dataaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaapppppppppppppppp</td><td>my dataaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaapppppppppppppppp</td></tr>              
      </tbody>
  </table>
</div>

score 1 · Answer 5 · answered May 23 '18 at 11:32

1

There is a draft for CSS Intrinsic & Extrinsic Sizing Module Level 3 that adds width: fit-content which does exactly what you want. It is not supported by IE/Edge though.

answered May 23 '18 at 11:32

tobib

2,114
4
21
35

Set min-width to width of contents

5 Answers5