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;
}

Answer 1

您需要考虑将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>

相关：Why is a flex item limited to parent size?

Answer 2

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

Answer 3

根据我对您的问题的了解，并分析了代码。一切正确，仅当内容超过div的大小时才会显示水平滚动，尝试添加更多项目

我想使Flexbox水平滚动

3 个答案: