1

I have .submission-detail container, which I want to be horizontally scrollable. I have seen and implement solutions on SO, but clearly none worked out.

Here is the Codepen link - https://codepen.io/yashwp/pen/rNOMjdw

<div class="submission-details">
  <div class="submission-details-item">
    <div class="count">5</div>
    <div class="batch-title">Somem  title isn</div>
  </div>
    <div class="submission-details-item">
    <div class="count">5</div>
    <div class="batch-title">Somem  title isn</div>
  </div>
    <div class="submission-details-item">
    <div class="count">5</div>
    <div class="batch-title">Somem  title isn</div>
  </div>
    <div class="submission-details-item">
    <div class="count">5</div>
    <div class="batch-title">Somem  title isn</div>
  </div>
    <div class="submission-details-item">
    <div class="count">5</div>
    <div class="batch-title">Somem  title isn</div>
  </div>
    <div class="submission-details-item">
    <div class="count">5</div>
    <div class="batch-title">Somem  title isn</div>
  </div>
</div>


.submission-details {
   display: flex;
   width: 100%;
   max-width: 250px;
   overflow-x: auto;
}
 .submission-details-item .count {
     font-size: 30px;
     text-align: center;
     color: #7F42FA;
     font-weight: bold;
}
 .submission-details-item .batch-title {
     font-size: 10px;
     text-align: center;
}
Yashwardhan Pauranik
  • 5,370
  • 5
  • 42
  • 65

3 Answers3

1

You need to consider flex-shrink:0; to the flex item or they will always shrink to fit their parent whataver the width is:

.submission-details {
  display: flex;
  max-width: 250px;
  overflow-x: auto;
  border: 1px solid;
}

.submission-details-item {
  flex-shrink: 0;
  margin: 5px;
  text-align: center;
}

.submission-details-item .count {
  font-size: 30px;
  color: #7F42FA;
  font-weight: bold;
}

.submission-details-item .batch-title {
  font-size: 10px;
}
<div class="submission-details">
  <div class="submission-details-item">
    <div class="count">5</div>
    <div class="batch-title">Somem title isn</div>
  </div>
  <div class="submission-details-item">
    <div class="count">5</div>
    <div class="batch-title">Somem title isn</div>
  </div>
  <div class="submission-details-item">
    <div class="count">5</div>
    <div class="batch-title">Somem title isn</div>
  </div>
  <div class="submission-details-item">
    <div class="count">5</div>
    <div class="batch-title">Somem title isn</div>
  </div>
  <div class="submission-details-item">
    <div class="count">5</div>
    <div class="batch-title">Somem title isn</div>
  </div>
  <div class="submission-details-item">
    <div class="count">5</div>
    <div class="batch-title">Somem title isn</div>
  </div>
</div>

Related: Why is a flex item limited to parent size?

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
0

.submission-details {
  display: flex;
  width: 100%;
   max-width: 250px;
  overflow-x: auto;
}

.submission-details-item {
  min-width: 150px;
  max-width: 150px;
}

 .submission-details-item .count {
  font-size: 30px;
  text-align: center;
  color: #7F42FA;
  font-weight: bold;
}
 .submission-details-item .batch-title {
  font-size: 10px;
  text-align: center;
}
<div class="submission-details">
  <div class="submission-details-item">
    <div class="count">5</div>
    <div class="batch-title">Somem  title isn</div>
  </div>
    <div class="submission-details-item">
    <div class="count">5</div>
    <div class="batch-title">Somem  title isn</div>
  </div>
    <div class="submission-details-item">
    <div class="count">5</div>
    <div class="batch-title">Somem  title isn</div>
  </div>
    <div class="submission-details-item">
    <div class="count">5</div>
    <div class="batch-title">Somem  title isn</div>
  </div>
    <div class="submission-details-item">
    <div class="count">5</div>
    <div class="batch-title">Somem  title isn</div>
  </div>
    <div class="submission-details-item">
    <div class="count">5</div>
    <div class="batch-title">Somem  title isn</div>
  </div>
  <div class="submission-details-item">
    <div class="count">5</div>
    <div class="batch-title">Somem  title isn</div>
  </div>
</div>

You have to give min and max width to the child elements

.submission-details {
  display: flex;
  width: 100%;
  max-width: 250px;
  overflow-x: auto;
}

.submission-details-item {
  min-width: 150px;
  max-width: 150px;
}

 .submission-details-item .count {
     font-size: 30px;
     text-align: center;
     color: #7F42FA;
     font-weight: bold;
}
 .submission-details-item .batch-title {
     font-size: 10px;
     text-align: center;
}


<div class="submission-details">
  <div class="submission-details-item">
    <div class="count">5</div>
    <div class="batch-title">Somem  title isn</div>
  </div>
    <div class="submission-details-item">
    <div class="count">5</div>
    <div class="batch-title">Somem  title isn</div>
  </div>
    <div class="submission-details-item">
    <div class="count">5</div>
    <div class="batch-title">Somem  title isn</div>
  </div>
    <div class="submission-details-item">
    <div class="count">5</div>
    <div class="batch-title">Somem  title isn</div>
  </div>
    <div class="submission-details-item">
    <div class="count">5</div>
    <div class="batch-title">Somem  title isn</div>
  </div>
    <div class="submission-details-item">
    <div class="count">5</div>
    <div class="batch-title">Somem  title isn</div>
  </div>
  <div class="submission-details-item">
    <div class="count">5</div>
    <div class="batch-title">Somem  title isn</div>
  </div>
</div>
Ktm Barath
  • 1
-1

From what I understand about your problem, and analyzing the code. Everything is correct, the horizontal scroll will only appear if the content exceeds the size of the div, try adding more items

Miguel B. Costa
  • 1