如何自动将 Flex 容器的宽度设置为其内容？

Question

在第三行，我希望圆形图像一直位于左侧，而占位符始终位于右侧。看起来 Flex 容器会自动扩展以填充空间并防止圆形图像彼此相邻。

这是正在进行的工作的 CodePen：https://codepen.io/psychedelicseal/pen/VwoxjEg

.pokemon-card {
  width: 300px;
  height: 100px;
  background-color: antiquewhite;
  border-radius: 50px 0 0 50px;
  display: flex;
  overflow: hidden;
  align-items: center;
}

.sprite {
  min-width: 100px;
  width: 100px;
  display: flex;
  justify-content: center;
}

.sprite>img {
  max-width: 85%;
  max-height: 85%;
}

.stats {
  width: 100%;
  display: grid;
  grid-template-rows: 31px 18px 20px 22px;
  gap: 3px;
}

.line-one,
.line-two,
.line-three,
.line-four {
  display: flex;
  align-items: center;
  width: 100%;
}

#name {
  grid-area: name;
  font-size: 30px;
}

#form {
  grid-area: form;
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: end;
}

#form>img {
  min-height: 0;
  min-width: 0;
}

.types {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  gap: 3px;
}

#type-one,
#type-two {
  display: flex;
  width: 100%;
}

#type-one>img,
#type-two>img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
}

#status>img {
  max-height: 100%;
  max-width: 100%;
}

.hp-container {
  width: 100%;
  height: 20px;
  background-color: black;
  border-radius: 10px 0 0 0;
}

<div class="pokemon-card">
  <div class="sprite">
    <img src="https://archives.bulbagarden.net/media/upload/7/73/0015Beedrill-Mega.png">
  </div>
  <div class="stats">
    <div class="line-one">
      <div id="name">Beedrill</div>
      <div id="form">
        <img src="https://archives.bulbagarden.net/media/upload/c/cc/Dream_Beedrillite_Sprite.png">
      </div>
    </div>
    <div class="line-two">
      Lv. 200
    </div>
    <div class="line-three">
      <div class="types">
        <div id="type-one">
          <img src="https://archives.bulbagarden.net/media/upload/2/26/Bug_icon_LA.png">
        </div>
        <div id="type-two">
          <img src="https://archives.bulbagarden.net/media/upload/b/b4/Poison_icon_LA.png">
        </div>
      </div>
      <div id="status">
        <img src="https://placehold.co/208x64">
      </div>
    </div>
    <div class="line-four">
      <div class="hp-container">
        <div class="currentHP"></div>
      </div>
    </div>
  </div>
</div>

我尝试将宽度设置为包含该线的原始网格

.stats {
  width: 100%;
  display: grid;
  grid-template-rows: 31px 18px 20px 22px;
  gap: 3px;
}

至线路本身

.line-one, .line-two, .line-three, .line-four {
  display: flex;
  align-items: center;
  width: 100%;
}

对于弹性容器，我想占据该行的左侧

.types {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  gap: 3px;
}

以及保存图像的子容器

#type-one, #type-two {
  display: flex;
  width: 100%;
}

Answer 1

从

width: 100%

和

#type-one

中删除

#type-two

。元素希望与容器一样大，但由于空间不足而缩小。

.pokemon-card {
  width: 300px;
  height: 100px;
  background-color: antiquewhite;
  border-radius: 50px 0 0 50px;
  display: flex;
  overflow: hidden;
  align-items: center;
}

.sprite {
  min-width: 100px;
  width: 100px;
  display: flex;
  justify-content: center;
}

.sprite>img {
  max-width: 85%;
  max-height: 85%;
}

.stats {
  width: 100%;
  display: grid;
  grid-template-rows: 31px 18px 20px 22px;
  gap: 3px;
}

.line-one,
.line-two,
.line-three,
.line-four {
  display: flex;
  align-items: center;
  width: 100%;
}

#name {
  grid-area: name;
  font-size: 30px;
}

#form {
  grid-area: form;
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: end;
}

#form>img {
  min-height: 0;
  min-width: 0;
}

.types {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  gap: 3px;
}

#type-one,
#type-two {
  display: flex;
}

#type-one>img,
#type-two>img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
}

#status>img {
  max-height: 100%;
  max-width: 100%;
}

.hp-container {
  width: 100%;
  height: 20px;
  background-color: black;
  border-radius: 10px 0 0 0;
}

<div class="pokemon-card">
  <div class="sprite">
    <img src="https://archives.bulbagarden.net/media/upload/7/73/0015Beedrill-Mega.png">
  </div>
  <div class="stats">
    <div class="line-one">
      <div id="name">Beedrill</div>
      <div id="form">
        <img src="https://archives.bulbagarden.net/media/upload/c/cc/Dream_Beedrillite_Sprite.png">
      </div>
    </div>
    <div class="line-two">
      Lv. 200
    </div>
    <div class="line-three">
      <div class="types">
        <div id="type-one">
          <img src="https://archives.bulbagarden.net/media/upload/2/26/Bug_icon_LA.png">
        </div>
        <div id="type-two">
          <img src="https://archives.bulbagarden.net/media/upload/b/b4/Poison_icon_LA.png">
        </div>
      </div>
      <div id="status">
        <img src="https://placehold.co/208x64">
      </div>
    </div>
    <div class="line-four">
      <div class="hp-container">
        <div class="currentHP"></div>
      </div>
    </div>
  </div>
</div>