我試著。我的work類可以滾動到邊上，我已經嘗試過使用overflow-x，但還是不行。相反，結果是這樣的:

越多。我添加的信息框類越多，它們就越相互重疊，而不是橫向滾動。哪里出了問題，如何修復？我用的是SASS薩斯。

這是SCSS電碼:

.mywork {
    margin: 10% auto;
    display: flex;
    flex-direction: row;
    overflow-x: scroll;
    border: 2px solid red;
    width: 95%;
}

.infobox {
    background-color: $seaLightYellow;
    border-radius: 30px;
    max-width: 450px;
    width: 450px;
    height: 400px;
    margin: 10px;
    text-align: center;

    img {
        // border: 2px solid red;
        width: 100%;
        border-radius: 25px 25px 0 0;
    }

    a {
        font-weight: bold;
        font-size: 30px;
        background: none;

        &:hover {
            color: rgba (0, 81, 255);
        }
    }

    p {
        background: none;
        border-radius: 30px;
        padding: 10px;
        font-size: 15px;
    }
}

@media (max-width: 600px) {
    .mywork {
        flex-direction: column;
    }

    .infobox {
        width: 100%;
        height: auto;
    }
}

HTML代碼:

<div class="mywork">
        <div id="firstwork" class="infobox">
            <img src="{{ asset('img/new_image_1.jpg') }}" alt="No Internet" />

            <a target="_blank" rel="noreferrer" href="http://newlink1.com/">New Link 1</a>
            <p>This is a new project I created. It's very exciting!</p>
        </div>

        <div class="infobox">
            <img src="{{ asset('img/new_image_2.jpg') }}" alt="No Internet" />

            <a target="_blank" rel="noreferrer" href="http://newlink2.com/">New Link 2</a>
            <p>This is another new project. I'm proud of my work!</p>
        </div>

        <div class="infobox">
            <img src="{{ asset('img/new_image_3.jpg') }}" alt="No Internet" />

            <a target="_blank" rel="noreferrer" href="http://newlink3.com/">New Link 3</a>
            <p>I've recently completed this project. It was a great learning experience.</p>
        </div>

        <div class="infobox">
            <img src="{{ asset('img/new_image_4.jpg') }}" alt="No Internet" />

            <a target="_blank" rel="noreferrer" href="http://newlink4.com/">New Link 4</a>
            <p>This project is my latest achievement. I'm thrilled with the results!</p>
        </div>

        <div class="infobox">
            <img src="{{ asset('img/new_image_5.jpg') }}" alt="No Internet" />

            <a target="_blank" rel="noreferrer" href="http://newlink5.com/">New Link 5</a>
            <p>I've just finished working on this project. It's been a challenging but rewarding experience.</p>
        </div>

        <div class="infobox">
            <img src="{{ asset('img/new_image_6.jpg') }}" alt="No Internet" />

            <a target="_blank" rel="noreferrer" href="http://newlink6.com/">New Link 6</a>
            <p>This project was a collaboration with talented individuals. I'm proud of what we've accomplished.</p>
        </div>

        <div class="infobox">
            <img src="{{ asset('img/new_image_7.jpg') }}" alt="No Internet" />

            <a target="_blank" rel="noreferrer" href="http://newlink7.com/">New Link 7</a>
            <p>Working on this project was a great learning opportunity. I've gained valuable skills.</p>
        </div>

        <div class="infobox">
            <img src="{{ asset('img/new_image_8.jpg') }}" alt="No Internet" />

            <a target="_blank" rel="noreferrer" href="http://newlink8.com/">New Link 8</a>
            <p>This project challenged me to think outside the box. I'm proud of the innovative solutions we came up with.</p>
        </div>

        <div class="infobox">
            <img src="{{ asset('img/new_image_9.jpg') }}" alt="No Internet" />

            <a target="_blank" rel="noreferrer" href="http://newlink9.com/">New Link 9</a>
            <p>Creating this project was a fulfilling experience. I'm grateful for the opportunity.</p>
        </div>

        <div class="infobox">
            <img src="{{ asset('img/new_image_10.jpg') }}" alt="No Internet" />

            <a target="_blank" rel="noreferrer" href="http://newlink10.com/">New Link 10</a>
            <p>I've recently launched this project. Check it out!</p>
        </div>
    </div>

默認情況下，flex布局的子級隱式具有flex-shrink: 1，這將嘗試收縮子級的主軸尺寸以適應容器。如果您不希望發生這種收縮，請通過將flex-shrink: 0應用于flex布局子項來覆蓋flex-shrink: 1:

.mywork {
  margin: 10% auto;
  display: flex;
  flex-direction: row;
  overflow-x: scroll;
  border: 2px solid red;
  width: 95%;
}

.infobox {
  background-color: $seaLightYellow;
  border-radius: 30px;
  max-width: 450px;
  width: 450px;
  height: 400px;
  margin: 10px;
  text-align: center;
  flex-shrink: 0;
}

.infobox img {
  // border: 2px solid red;
  width: 100%;
  border-radius: 25px 25px 0 0;
}

.infobox a {
  font-weight: bold;
  font-size: 30px;
  background: none;
}

.infobox a:hover {
  color: rgba (0, 81, 255);
}

.infobox p {
  background: none;
  border-radius: 30px;
  padding: 10px;
  font-size: 15px;
}

@media (max-width: 600px) {
  .mywork {
    flex-direction: column;
  }
  .infobox {
    width: 100%;
    height: auto;
  }
}

<div class="mywork">
  <div id="firstwork" class="infobox">
    <img src="https://picsum.photos/1000/1000" alt="No Internet" />

    <a target="_blank" rel="noreferrer" >New Link 1</a>
    <p>This is a new project I created. It's very exciting!</p>
  </div>

  <div class="infobox">
    <img src="https://picsum.photos/1000/1000?" alt="No Internet" />

    <a target="_blank" rel="noreferrer" >New Link 2</a>
    <p>This is another new project. I'm proud of my work!</p>
  </div>

  <div class="infobox">
    <img src="https://picsum.photos/1000/1000?0" alt="No Internet" />

    <a target="_blank" rel="noreferrer" >New Link 3</a>
    <p>I've recently completed this project. It was a great learning experience.</p>
  </div>

  <div class="infobox">
    <img src="https://picsum.photos/1000/1000?1" alt="No Internet" />

    <a target="_blank" rel="noreferrer" >New Link 4</a>
    <p>This project is my latest achievement. I'm thrilled with the results!</p>
  </div>

  <div class="infobox">
    <img src="https://picsum.photos/1000/1000?2" alt="No Internet" />

    <a target="_blank" rel="noreferrer" >New Link 5</a>
    <p>I've just finished working on this project. It's been a challenging but rewarding experience.</p>
  </div>

  <div class="infobox">
    <img src="https://picsum.photos/1000/1000?3" alt="No Internet" />

    <a target="_blank" rel="noreferrer" >New Link 6</a>
    <p>This project was a collaboration with talented individuals. I'm proud of what we've accomplished.</p>
  </div>

  <div class="infobox">
    <img src="https://picsum.photos/1000/1000?4" alt="No Internet" />

    <a target="_blank" rel="noreferrer" >New Link 7</a>
    <p>Working on this project was a great learning opportunity. I've gained valuable skills.</p>
  </div>

  <div class="infobox">
    <img src="https://picsum.photos/1000/1000?5" alt="No Internet" />

    <a target="_blank" rel="noreferrer" >New Link 8</a>
    <p>This project challenged me to think outside the box. I'm proud of the innovative solutions we came up with.</p>
  </div>

  <div class="infobox">
    <img src="https://picsum.photos/1000/1000?6" alt="No Internet" />

    <a target="_blank" rel="noreferrer" >New Link 9</a>
    <p>Creating this project was a fulfilling experience. I'm grateful for the opportunity.</p>
  </div>

  <div class="infobox">
    <img src="https://picsum.photos/1000/1000?7" alt="No Internet" />

    <a target="_blank" rel="noreferrer" >New Link 10</a>
    <p>I've recently launched this project. Check it out!</p>
  </div>
</div>