CODEWITHSUNDEEP
htmlcss
user616
user616

Reputation: 855

Item width not 100% when scrollbars present

When i have content that is wider than the container, i have scrollbars set to auto but the hover color effect doesn't apply to the entire child node. The hover color only displays for the width of the initial width of the parent container WITHOUT the scrollbar.

HTML

<div class="container">
  <div class="tab">
    <label>Tab 1</label>
    <div class="content">
      <div>asdasd 1111</div>
      <div>asdasd 2222</div>
      <div>asdasd 3333</div>
      <div>asdasd 4444</div>
      <div>asdasd 5555</div>
      <div>asdasd 6666666666666666666666166666666666</div>
    </div>
  </div>
  <div class="tab">
    <label>Tab 2</label>
    <div class="content">
      <div>asdasd 7777</div>
      <div>asdasd 8888</div>
      <div>asdasd 9999</div>
    </div>
  </div>
</div>

CSS

.container {
  width: 240px;
  height: 98vh;
  background: tan;
  height: calc(100vh - 40px);
}

.tab label {
  position: relative;
  display: block;
  height: 30px;
  line-height: 30px;
  padding: 0 20px;
  font-size: 14px;
  font-weight: bold;
  color: rgba(255, 255, 255, 0.5);
  background: #434343;
  cursor: pointer;
}

.content {
  overflow: auto;
}

.content div {
  white-space: nowrap;
  margin-left: 10px;
}

.content div:hover {
  cursor: pointer;
  background: grey;
}

JSFiddle

In the above fiddle its more clear what im talking about. Tab 1 has some child content that runs out of the container BUT the hover color only applies to the initial container width. If you scroll all the way to the right in Tab 1, then the hover color is not 100% of the entire width.

Upvotes: 0

Views: 44

Answers (1)

Temani Afif
Temani Afif

Reputation: 272772

Make the element inline-block and add min-width:100% to be sure the element behave like block and will extend when the content is bigger:

.container {
  width: 240px;
  height: 98vh;
  background: tan;
  height: calc(100vh - 40px);
}

.tab label {
  position: relative;
  display: block;
  height: 30px;
  line-height: 30px;
  padding: 0 20px;
  font-size: 14px;
  font-weight: bold;
  color: rgba(255, 255, 255, 0.5);
  background: #434343;
  cursor: pointer;
}

.content {
  overflow: auto;
}

.content div {
  white-space: nowrap;
  margin-left: 10px;
  display:inline-block;
  min-width:calc(100% - 10px); /*remove margin*/
}

.content div:hover {
  cursor: pointer;
  background: grey;
}
<div class="container">
  <div class="tab">
    <label>Tab 1</label>
    <div class="content">
      <div>asdasd 1111</div>
      <div>asdasd 2222</div>
      <div>asdasd 3333</div>
      <div>asdasd 4444</div>
      <div>asdasd 5555</div>
      <div>asdasd 6666666666666666666666166666666666</div>
    </div>
  </div>
  <div class="tab">
    <label>Tab 2</label>
    <div class="content">
      <div>asdasd 7777</div>
      <div>asdasd 8888</div>
      <div>asdasd 9999</div>
    </div>
  </div>
</div>

You can also consider inline-block for the whole content:

.container {
  width: 240px;
  height: 98vh;
  background: tan;
  height: calc(100vh - 40px);
}

.tab label {
  position: relative;
  display: block;
  height: 30px;
  line-height: 30px;
  padding: 0 20px;
  font-size: 14px;
  font-weight: bold;
  color: rgba(255, 255, 255, 0.5);
  background: #434343;
  cursor: pointer;
}

.wrapper {
  overflow: auto;
}
.content {
  display: inline-block;
  min-width: 100%;

}
.content div {
  white-space: nowrap;
  margin-left: 10px;
}

.content div:hover {
  cursor: pointer;
  background: grey;
}
<div class="container">
  <div class="tab">
    <label>Tab 1</label>
    <div class="wrapper">
      <div class="content">
        <div>asdasd 1111</div>
        <div>asdasd 2222</div>
        <div>asdasd 3333</div>
        <div>asdasd 4444</div>
        <div>asdasd 5555</div>
        <div>asdasd 6666666666666666666666166666666666</div>
      </div>
    </div>
  </div>
  <div class="tab">
    <label>Tab 2</label>
    <div class="wrapper">
      <div class="content">
        <div>asdasd 7777</div>
        <div>asdasd 8888</div>
        <div>asdasd 9999</div>
      </div>
    </div>
  </div>
</div>

Upvotes: 2

Related Questions