css - 我想让我的 flexbox 水平滚动

Question

我有.submission-detail容器，我希望它可以水平滚动。我已经看到并实施了关于 SO 的解决方案，但显然没有一个解决方案。

这是 Codepen 链接 - 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;
}

score 1 · Accepted Answer

您需要考虑flex-shrink:0;弹性项目，否则它们将始终缩小以适应其父项，无论宽度是：

.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>

相关：为什么弹性项目仅限于父尺寸？

score 0 · Accepted Answer

.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>

您必须为子元素提供最小和最大宽度

.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>

score -1 · Accepted Answer

根据我对您的问题的了解，并分析代码。一切都正确，只有内容超过div的大小才会出现水平滚动，尝试添加更多项

css - 我想让我的 flexbox 水平滚动

3 回答 3

Related

Reference