Set min-width to width of contents

css, responsive

Solution

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/

Problem

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.

Original source

Related problems