Html Flexbox 子项缩小到超出设置的最小宽度

:root {
  --clr-light-text: #f2f2f2;
  --clr-dark-text: #48484a;
  --shadow-default: 0px 2px 8px rgba(0, 0, 0, 0.2);
  --vid-container-h: 0px;
  color: var(--clr-light-text);
  font-family: 'Poppins', sans-serif;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
  text-decoration: none;
}

h1,
h2,
h3,
h4 {
  font-weight: 400;
}

body {
  background-color: var(--clr-dark-text);
  text-align: center;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

.glass {
  background-image: linear-gradient( 135deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
  backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: var(--shadow-default);
  border-radius: 0.5rem;
}

main {
  display: flex;
  justify-content: center;
  padding: 0 1rem;
  gap: 2rem;
}

.main-container {
  background-color: hsl(0, 0%, 75%);
  padding-bottom: 10rem;
  position: relative;
}

.weather-box {
  width: clamp(13.5rem, 18%, 20rem);
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  padding: 0 1em 1em 1em;
}

#weather-icon {
  margin: -15% -10%;
}

.weather-details {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

#forecast,
#temp,
#humidity {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#temp {
  margin-bottom: 1em;
  font-weight: 200;
}

#temp-num {
  font-size: 3em;
}

#humid {
  font-size: 1.5em;
}

#humid-value {
  font-size: 1.5em;
  font-weight: 200;
}

#humid-value img {
  max-width: 1em;
}

#forecast-desc {
  font-size: 2.5em;
  font-weight: 400;
}

.playlist-box {
  width: clamp(13.5rem, 18%, 20rem);
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 1rem 0.5em;
  flex-shrink: 0;
}

.playlist-box h3::after {
  content: '';
  width: 70%;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 100vmax;
  display: block;
  margin: 1em auto;
}

#playlist {
  display: grid;
  width: 100%;
  padding: 1em;
  overflow-y: scroll;
  scroll-behavior: smooth;
}

#playlist li {
  margin-bottom: 1rem;
  width: 100%;
  padding: 1rem;
  border: 1px solid rgba(255, 255, 255, 0);
}

#playlist li:hover,
#playlist li:focus {
  background-image: linear-gradient( 135deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0));
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: var(--shadow-default);
  border-radius: 0.5rem;
}

.song-title {
  margin-bottom: 0.5em;
}

.vid-thumb {
  width: 100%;
  /* object-position: center;
  object-fit: cover; */
}

.video-container {
  align-self: flex-start;
  padding: 1em;
}

#song-frame {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%;
}

#song-frame iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

<div class="main-container">
  <main>
    <aside class="weather-box glass">
      <div id="forecast">
        <img id="weather-icon" src="http://openweathermap.org/img/wn/02d@4x.png" alt="Weather Icon" />
        <span id="forecast-desc">(--)</span>
      </div>
      <div class="weather-details">
        <div id="temp">
          <span id="temp-num">0&deg;c</span>
          <span id="feels-like">feels like 0&deg;c</span>
        </div>
        <div id="humidity">
          <span id="humid">Humidity</span>
          <div id="humid-value">
            <span id="humid-num">0%</span>
          </div>
        </div>
      </div>
    </aside>

    <div class="video-container glass">
      <div id="song-frame">
        <iframe src="https://www.youtube.com/embed/oG08ukJPtR8" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" width="1024" height="576" frameborder="0"></iframe>
      </div>
    </div>
    <aside class="playlist-box glass">
      <h3>Browse Playlist:</h3>
      <ul id="playlist">
        <li>
          <h4>Song Title</h4>
          <img class="vid-thumb" src="https://i.ytimg.com/vi/ru0K8uYEZWw/hqdefault.jpg" alt="" />
        </li>
        <li>
          <h4>Song Title</h4>
          <img class="vid-thumb" src="https://i.ytimg.com/vi/pkCyfBibIbI/hqdefault.jpg" alt="" />
        </li>
      </ul>
    </aside>
  </main>
</div>