9

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.

3
  • Do u need to set the background for each text individually? Wouldn't it be easier to just set the scrollable background?
    – Ms. Nobody
    Jul 1, 2013 at 13:52
  • @Ms.Nobody, yeah i need to set them individually because they are actually part of a scrollable menu with background and border, this is just a simple example to isolate the issue.
    – magritte
    Jul 1, 2013 at 13:54
  • So you want to have menu that will have to be scrolled? Can you put somewhere the whole thing? Or just the menu but with real items because I don't understand why u want menu to be scrollable vertically :D
    – Ms. Nobody
    Jul 1, 2013 at 13:56

5 Answers 5

11

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

5
  • Simple and elegant, that's great !
    – Jaay
    Jul 1, 2013 at 13:55
  • Perfecto! Cheers dude! Any ideas why display: block; didn't work whereas display: table-row does?
    – magritte
    Jul 1, 2013 at 14:01
  • I don't know how the browsers render engine suppose to work. But I guess that when overflowing occurs, browser does not take into consideration the width of nested block on which the background will be rendered. In case of using table-row width would be calculated with consider of contained text width.
    – YD1m
    Jul 1, 2013 at 14:28
  • :/ I'm running into a situation where this is happening with flex box, so I already have display: flex. Going to have to come up with some hacky solution then I guess.
    – stubailo
    Nov 4, 2014 at 8:55
  • With display: table-row if inner DIV is too small, it is not stretched to the full width of the outer DIV. So this answer is not really solves "set width of inner div on scrollable element to 100% of scrollable width" problem. It also doesn't allow to set padding. jsfiddle.net/8rsptwxu Oct 10, 2019 at 16:32
0

just give this to your content

 overflow: auto;
1
  • this just scrolls the individual content element, but i need the whole thing to scroll.
    – magritte
    Jul 1, 2013 at 13:56
0

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.

0

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.

6
  • i think he wants the scroll Jul 1, 2013 at 13:51
  • @MadanlalArora that's correct, I need it to scroll. I actually also have white-space: nowrap to ensure it scrolls.
    – magritte
    Jul 1, 2013 at 13:52
  • @MadanlalArora "width of this inner content div to be equal to the width of the scrollable area", the scrollable being the parent class. So, I believe the objective is to have the width equal.
    – reggaemahn
    Jul 1, 2013 at 13:52
  • dude check the fiddle i gave in my ans does that solve your issue ? Jul 1, 2013 at 13:54
  • @Jaay In that case you need to add overflow: auto to the child element. Check the update.
    – reggaemahn
    Jul 1, 2013 at 13:56
0

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/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.