set width of inner div on scrollable element to 100% of scrollable width

Answer 1

You can use display: table-row; for nested divs. Look at jsfiddle

Answer 2

Add to .content class

overflow: auto;

Updated fiddle here: http://jsfiddle.net/XBVsR/11/

Do remember that this would affect all elements with class .content. You might wanna give it another class name too.

Answer 3

You can't if you're going to set the outer div to be width 300px. It's the unbroken text breaking the bounding box. You can, however, wrap the word by adding this to the content CSS:

word-wrap: break-word;

However, if that 300px doesn't matter to you, you can move the overflow: auto from the scrollable class to the content one, and that, too, should fix the background issue.

Answer 4

just give this to your content

 overflow: auto;

Answer 5

The solution is to use two nested inner divs instead of one inner div.

The outer nested div should have display: table and also should have min-width: 100%; and min-height: 100%;, while the innermost nested div should have display: table-cell.

This way the table will stretch in both ways (horizontally and vertically) to the outer scrollable container's viewport if the contents of the table cell is too small, but will stretch futher if the content is big enough.

It also allows to set paddings on innermost div.

.outer {
  width: 200px;
  height: 100px;
  overflow: auto;
}

.middle {
  background: lightpink;
  display: table;
  min-width: 100%;
  min-height: 100%;
}

.inner {
  display: table-cell;
  white-space: pre-line;
  padding: 10px;
}

<div class="outer">
  <div class="middle">
    <div class="inner">loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong
and another one text
and another one text
and another one text
and another one text
and another one text
and another one text
    </div>
  </div>
</div>

<hr>

<div class="outer">
  <div class="middle">
    <div class="inner">short
    short
    short
    short
    short
    short
    short
    short
    </div>
  </div>
</div>

<hr>

<div class="outer">
  <div class="middle">
    <div class="inner">short</div>
  </div>
</div>

https://jsfiddle.net/4cuzqo06/