CODEWITHSUNDEEP
htmlcsslistboxflexboxoverflow
Stik
Stik

Reputation: 607

Background of div does not scroll with the contents

I have the following snippet of html that forms an X-Y scrollable listbox 

* {
  font-family: "consolas";
}
.listbox {
  border: 1px solid black;
  padding: 4px;
  width: 150px;
  height: 200px;
  display: flex;
  flex-direction: column;
}
.caption {
  font-weight: bold;
  background-color: #aaf;
  padding: 10px;
}
.content {
  flex-grow: 1;
  overflow: scroll;
}
.item {
  background-color: #ddd;
  padding: 2px;
  padding-left: 6px;
  margin-top: 4px;
  white-space: nowrap;
}
<div class="listbox">
  <div class="caption">Caption</div>
  <div class="content">
    <div class="item">One</div>
    <div class="item">Two</div>
    <div class="item">Three (this has a longer bit)</div>
    <div class="item">Four</div>
    <div class="item">Five</div>
    <div class="item">Six</div>
    <div class="item">Seven</div>
    <div class="item">Eight (so does this)</div>
    <div class="item">Nine</div>
    <div class="item">Ten</div>
  </div>
</div>

It's working fine, with one problem, as the user scrolls from left to right, the background of the div seems to get left behind. It's as though the actual div only stretches the width of its parent, and the scrolling/overflow thing is "faked" somehow.

Why is this the case?

How do I address the problem? The behaviour I want is for all the items to appear to be the same width as the largest one.

Upvotes: 3

Views: 1108

Answers (1)

Stickers
Stickers

Reputation: 78696

Try adding a container <div class="items"> around the items set it to display:inline-block.

.items {
  display: inline-block;
}


* {
  font-family: "consolas";
}
.listbox {
  border: 1px solid black;
  padding: 4px;
  width: 150px;
  height: 200px;
  display: flex;
  flex-direction: column;
}
.caption {
  font-weight: bold;
  background-color: #aaf;
  padding: 10px;
}
.content {
  flex-grow: 1;
  overflow: scroll;
}
.items {
  display: inline-block;
}
.item {
  background-color: #ddd;
  padding: 2px;
  padding-left: 6px;
  margin-top: 4px;
  white-space: nowrap;
}
<div class="listbox">
  <div class="caption">Caption</div>
  <div class="content">
    <div class="items">
      <div class="item">One</div>
      <div class="item">Two</div>
      <div class="item">Three (this has a longer bit)</div>
      <div class="item">Four</div>
      <div class="item">Five</div>
      <div class="item">Six</div>
      <div class="item">Seven</div>
      <div class="item">Eight (so does this)</div>
      <div class="item">Nine</div>
      <div class="item">Ten</div>
    </div>
  </div>
</div>

Explanation: by default a block level element takes 100% width of the container no more than that, however an inline block will expand to content length if available e.g. in a scrollable container.

Also apply .items {min-width: 100%;} in case you want the background to grow full width even with less text in every row.

Upvotes: 2

Related Questions