溢流滚动不起作用

Question

.main-content{
  height: 100%;
  width: 60%;
  min-height: 800px;
  background-color: white;
  border-radius: 5px;
  margin-left: 1%;
  border: solid 1px black;
}

.profile-banner{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 7vw;
  margin-top: 7%;
  background-color: rgba(71, 135, 195, 0.5);
}

.profile-avatar{
  width: 18%;
  margin-right: 3%;
  img{
    width: 100%;
    border: solid white 2px;
  }
}

.profile-username{
  margin-left: 5%;
  font-size: 4vw;
  color: $font-blue;
  font-family: 'Titillium Web', sans-serif;
  -webkit-text-stroke: 1px white;
}

.profile-second-sec{
  margin-top: 8%;
  height: 20vw;
  background-color: blue;
}

.profile-third-sec{
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 8%;
  height: 30vw;
  background-color: grey;
  overflow-x: scroll;
  white-space: nowrap

}

.profile-image-container{
  display: flex;
  align-items: center;
}

<div class="main-content">
<div class="tab-header font-large">
  <i class="fa fa-user"></i> User profile
</div>
<div class="profile-banner flerowspb">
  <div class="profile-username">
    User profile 
  </div>
  <div class="profile-avatar">
   Avatar image
  </div>
</div>

<div class="profile-second-sec">

</div>

<div class="profile-third-sec">
  >> This is where the images go <<
</div>
</div>

编辑：在代码snippit中添加，希望它有所帮助

我试图创建一个水平滚动div，但是当我添加内容图像时，它所做的就是挤压它内部的所有图像，

所以它调整图像大小以适应但我希望它们是正常尺寸并且能够滚动。

现在我尝试添加溢出滚动，但它没有那种效果

  .profile-third-sec{
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 8%;
    height: 30vw;
    background-color: $font-grey;
    overflow-x: scroll;

  }

  .profile-image-container{
    display: flex;
    align-items: center;
  }

现在我觉得我对此知之甚少，但显然不行！所以任何想法都将受到赞赏。

由于

Answer 1

Flex具有默认的wrap属性，您可以根据以下样式表尝试代码。

.className {
  display: flex;
  flex-wrap: nowrap;
  overflow: auto;
 -webkit-overflow-scrolling: touch;
 -ms-overflow-style: -ms-autohiding-scrollbar;
}

.class {
  display: flex;
  flex-wrap: nowrap;
}

Answer 2

您可以删除flexbox规则。然后为图像提供一些属性。使用white-space和overflow应该适合您。

示例：

.main-content {
  height: 100%;
  width: 60%;
  min-height: 800px;
  background-color: white;
  border-radius: 5px;
  margin-left: 1%;
  border: solid 1px black;
}

.profile-banner {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 7vw;
  margin-top: 7%;
  background-color: rgba(71, 135, 195, 0.5);
}

.profile-avatar {
  width: 18%;
  margin-right: 3%;
  img {
    width: 100%;
    border: solid white 2px;
  }
}

.profile-username {
  margin-left: 5%;
  font-size: 4vw;
  color: $font-blue;
  font-family: 'Titillium Web', sans-serif;
  -webkit-text-stroke: 1px white;
}

.profile-second-sec {
  margin-top: 8%;
  height: 20vw;
  background-color: blue;
}

.profile-third-sec {
  margin-top: 8%;
  height: 30vw;
  background-color: grey;
  overflow-x: scroll;
  white-space: nowrap
}

.prgile-third-sec img {
  display: block;
  width: 100%;
  height: auto;
}

.profile-image-container {
  display: flex;
  align-items: center;
}

<div class="main-content">
  <div class="tab-header font-large">
    <i class="fa fa-user"></i> User profile
  </div>
  <div class="profile-banner flerowspb">
    <div class="profile-username">
      User profile
    </div>
    <div class="profile-avatar">
      Avatar image
    </div>
  </div>

  <div class="profile-second-sec">

  </div>

  <div class="profile-third-sec">
    <img src="https://unsplash.it/300">
    <img src="https://unsplash.it/300">
    <img src="https://unsplash.it/300">
    <img src="https://unsplash.it/300"></div>
  </div>