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

Answer 1

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;
}

  

    
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
    
  





  

    
short
    short
    short
    short
    short
    short
    short
    short
    
  





  

    
short
  

https://jsfiddle.net/4cuzqo06/