How do I get an absolutely positioned div with overflow auto to grow to the width of it's contents with white-space set to nowrap?

Question

body {
  position: relative;
}

.test {
  position: absolute;
  top: 10px;
  left: 10px;
  height: 200px;
  border: 1px solid #ccc;
  overflow-y: auto;
  overflow-x: hidden;
  white-space: nowrap;
}

.wrap {
  display: inline-block;
}

.item {
  padding: 10px;
  border-bottom: 1px solid #ccc;
}
.item:last-child {
  border-bottom: none;
}

<div class="test">
  <div class="wrap">
    <div class="item">Some</div>
    <div class="item">Larger amount</div>
    <div class="item">of text</div>
    <div class="item">should go in</div>
    <div class="item">these items to prove</div>
    <div class="item">that this thing is gonna grow to whatever</div>
    <div class="item">to whatever</div>
    <div class="item">it needs to</div>
  </div>
</div>

The problem is that when the vertical scroll bar appears the absolutely positioned div doesn't grow accordingly and some content on the longest item is cut off. If I take 'overflow-x: hidden' off a horizontal scroll bar appears and that's not what I want either.

When 'white-space: nowrap' is removed everything looks good but I want each item to be one line. Is there any way to have the absolutely positioned div grow according to the width of a 'white-space: nowrap' element?

lol @ ravi..did you even read his question? he already mention the point which you are talking about.. — Leo the lion
i think you can use this way css-tricks.com/almanac/properties/t/text-overflow — Ravi Chauhan

ctwheels ctwheels · Accepted Answer · 2015-06-24T13:33:09

I think this is what you want

body {
    position: relative;
}
.test {
    position: absolute;
    top: 10px;
    left: 10px;
    height: 200px;
    border: 1px solid #ccc;
    overflow-y: auto;
    overflow-x: hidden;
    white-space: nowrap;
}
.wrap {
    display: inline-block;
}
.item {
    padding: 10px;
    border-bottom: 1px solid #ccc;
    padding-right:28px;
}
.item:last-child {
    border-bottom: none;
}

<div class="test">
    <div class="wrap">
        <div class="item">Some</div>
        <div class="item">Larger amount</div>
        <div class="item">of text</div>
        <div class="item">should go in</div>
        <div class="item">these items to prove</div>
        <div class="item">that this thing is gonna grow to whatever</div>
        <div class="item">to whatever</div>
        <div class="item">it needs to</div>
    </div>
</div>

I added padding-right:28px; to accommodate for the width of the existing padding and the width of the scrollbar.

How do I get an absolutely positioned div with overflow auto to grow to the width of it's contents with white-space set to nowrap?

1 Answers