CODEWITHSUNDEEP
htmlcss
magritte
magritte

Reputation: 7636

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

How do I get the width of this inner content div to be equal to the width of the scrollable area?

<div class="scrollable">
    <div class="content">short</div>
    <div class="content">very looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong text</div>
</div>

with CSS:

.scrollable {
    width: 300px;
    height: 300px;
    overflow: auto;
}

.content {
    background-color: lightblue;
    white-space: nowrap;
}

jsFiddle: http://jsfiddle.net/XBVsR/12/

PROBLEM: if you scroll across you can see that the background does not go all the way across as it should.

I've tried setting width: 100%, overflow: visible, etc, to no avail.

EDIT: I've updated to make clear that I don't want the text to wrap - I want the horizontal scroll on the whole thing.

Upvotes: 9

Views: 4903

Answers (5)

Ruslan Stelmachenko
Ruslan Stelmachenko

Reputation: 5420

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/

Upvotes: 0

YD1m
YD1m

Reputation: 5895

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

Upvotes: 11

reggaemahn
reggaemahn

Reputation: 6648

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.

Upvotes: 0

GoGoCarl
GoGoCarl

Reputation: 2519

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.

Upvotes: 0

Madanlal Arora
Madanlal Arora

Reputation: 115

just give this to your content

 overflow: auto;

Upvotes: 0

Related Questions