CODEWITHSUNDEEP
htmlcss
Desiigner
Desiigner

Reputation: 2336

Element's border bottom is cut off inside of a horizontal container

I'm trying to add a horizontally scrollable container that consists of divs (rows) where each row has its own border bottom. It works but when I start horizontally scrolling the container I see the border is being cut, that's related to the row having 100% width of the container width.

Is there a way to fix it without using pixel values (and JS), since the width of a row is fully dynamic?

.table {
  width: 350px;
  overflow-x: auto;
  white-space: nowrap;
  border: 1px solid red;
}

.row {
  display: flex;
  border-bottom: 1px dotted blue;
}

p {
  width: 50px;
  flex-shrink: 0;
}
<div class="table">
  <div class="row">
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
  </div>
  <div class="row">
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
  </div>
  <div class="row">
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
  </div>
  <div class="row">
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
  </div>
</div>

Upvotes: 1

Views: 870

Answers (2)

G-Cyrillus
G-Cyrillus

Reputation: 106008

You can also use width:max-content; to allow it to grow past the 100% of width (default behavior of a block element) of its parent (like a table would do).

example :)

.table {
  width: 350px;
  overflow-x: auto;
  border: 1px solid red;
}

.row {
  display: flex;
  border-bottom: 1px dotted blue;
  width:max-content;
 /* eventually  min-width:100% */
}

p {
  width: 50px;
  flex-shrink: 0;
}
<div class="table">
  <div class="row">
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
  </div>
  <div class="row">
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
  </div>
  <div class="row">
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
  </div>
  <div class="row">
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
  </div>
</div>

Upvotes: 1

Temani Afif
Temani Afif

Reputation: 273532

Update your code like below:

.table {
  width: 350px;
  overflow-x: auto;
  /*white-space: nowrap; not needed */
  border: 1px solid red;
}

.row {
  display: inline-flex; /* update */
  min-width:100%; /* added */
  border-bottom: 1px dotted blue;
}

p {
  width: 50px;
  flex-shrink: 0;
}
<div class="table">
  <div class="row">
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
  </div>
  <div class="row">
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
  </div>
  <div class="row">
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
  </div>
  <div class="row">
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
  </div>
</div>

Related question: Why does the outer <div> here not completely surround the inner <div>?

Upvotes: 4

Related Questions