我的代码中有四行。它们堆叠在彼此的顶部，在每一行中，我有一个放在div标签中的图像。现在这完全没问题，但是当我减小页面大小时，它们会以不同的方式收缩，并且具有不同的宽度。我试过flex-shrink: 0;，它工作，但有人有其他解决方案吗？

.content .pop_tracks {
  margin-top: 2rem;
}

.pop_tracks .title_tracks {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* color: #fff; */
  border: 1px solid #f00;
}

.pop_tracks .part_tracks {
  display: flex;
  justify-content: space-between;
  margin-top: 1rem;
  color: #aaaaaa;
  border: 1px solid #808080;
}

.part_tracks .popsong_info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-basis: 50%;
}

.popsong_info .popsong_name {
  display: flex;
  align-items: center;
  flex-basis: 60%;
}

.popsong_info .popsinger_name {
  flex-basis: 40%;
}

.popsong_name>p {
  /* color: #fff; */
  flex-basis: 50%;
  margin-left: 10px;
}

.popsong_name .song_number {
  font-size: 1.2rem;
  flex-basis: 1.5rem;
}

.popsong_name .track_image {
  flex-basis: 80px;
  /* flex-shrink: 0; */
  overflow: hidden;
  border-radius: 10px;
  margin-left: 10px;
}

.popsong_name img {
  width: 100%;
  vertical-align: bottom;
}

.part_tracks .popsong_user {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-basis: 50%;
}

.popsong_user>div {
  margin-left: 1.8rem;
}

.popsong_user i {
  cursor: pointer;
}

.popsong_user .circle-play {
  font-size: 2rem;
}

<div class="pop_tracks">
  <div class="title_tracks">
    <h2>Popular Tracks</h2>
    <p>See All</p>
  </div>
  <div class="part_tracks">
    <div class="popsong_info">
      <div class="popsong_name">
        <div class="song_number">01</div>
        <div class="track_image">
          <img src="https://somethingaboutsandwiches.com/wp-content/uploads/2020/08/fried-egg-sandwich-new-size-500x500.jpg" alt="">
        </div>
        <p>Midnight</p>
      </div>
      <p class="popsinger_name">Teylor Swift</p>
    </div>
    <div class="popsong_user">
      <div>
        <i class="fa-solid fa-clock"></i>
        <span>03:09</span>
      </div>
      <div>
        <i class="fa-solid fa-headphones"></i>
        <span>46K</span>
      </div>
      <div>
        <i class="fa-regular fa-heart"></i>
        <span>6K</span>
      </div>
      <div>
        <i class="fa-regular fa-circle-play circle-play"></i>
      </div>
    </div>
  </div>
  <div class="part_tracks">
    <div class="popsong_info">
      <div class="popsong_name">
        <div class="song_number">02</div>
        <div class="track_image">
          <img src="https://www.wonderplugin.com/wp-content/uploads/2016/06/blue-grape-hyacinths.jpg" alt="">
        </div>
        <p>Rock A Chock</p>
      </div>
      <p class="popsinger_name">Mehrad Hidden</p>
    </div>
    <div class="popsong_user">
      <div>
        <i class="fa-solid fa-clock"></i>
        <span>04:35</span>
      </div>
      <div>
        <i class="fa-solid fa-headphones"></i>
        <span>84K</span>
      </div>
      <div>
        <i class="fa-regular fa-heart"></i>
        <span>4K</span>
      </div>
      <div>
        <i class="fa-regular fa-circle-play circle-play"></i>
      </div>
    </div>
  </div>
  <div class="part_tracks">
    <div class="popsong_info">
      <div class="popsong_name">
        <div class="song_number">03</div>
        <div class="track_image">
          <img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Gallet_clamshell_600x600_movement.jpg" alt="">
        </div>
        <p>Be Khod Ay</p>
      </div>
      <p class="popsinger_name">Madgal</p>
    </div>
    <div class="popsong_user">
      <div>
        <i class="fa-solid fa-clock"></i>
        <span>03:24</span>
      </div>
      <div>
        <i class="fa-solid fa-headphones"></i>
        <span>67K</span>
      </div>
      <div>
        <i class="fa-regular fa-heart"></i>
        <span>9K</span>
      </div>
      <div>
        <i class="fa-regular fa-circle-play circle-play"></i>
      </div>
    </div>
  </div>
</div>