我有一个固定纵横比的svg，我想把它放在另一个具有动态高度和宽度的元素旁边。最终结果应该类似于下面的代码片段，但是容器元素(黄色背景)应该正确地包含它的所有子元素。

* {
  box-sizing: border-box;
}

.container {
  padding: 10px;
  background-color: yellow;
  font-size: 24px;
  
  display: inline-flex;
}

.pre {
  background-color: blue;
  animation: changePadding 1000ms infinite alternate;
}

.post {
  background-color: red; // not visible because width is currently 0
  width: fit-content; // doesn't work
}

.post svg {
  height: 100%;
}

@keyframes changePadding {
  from {padding: 0px 0px;}
  to {padding: 10px 10px;}
}

<div class="container">
  <div class="pre">Stuff</div>
  <div class="post">
    <svg viewBox="0 0 10 10">
      <circle cx="5" cy="5" r="5" fill="purple"></circle>
      <line x1="0" y1="0" x2="10" y2="10" stroke="red"></line>
    </svg>
  </div>
</div>