Flexbox布局下图片旋转后容器自动调整避免重叠的问题求助

各位好！我最近在处理Flexbox布局里的图片旋转问题时卡壳了，想请大家帮忙支支招。

情况是这样的：我有一组尺寸完全一致的图片，但它们的具体宽高没法提前确定。其中部分图片会被随机旋转90度，我希望容器能自动适配这些旋转后的图片，让它们不会互相重叠或者超出容器范围。

我目前写的代码如下：

CSS 代码 #

.container {
  display: flex;
  height: 200px;
  width: 600px;
  background-color: yellow;
  justify-content: center;
  align-items: center;
}

.item {
  justify-content: center;
  align-items: center;
}

.rotated-item {
}

img {
  height: 150px;
}

.rotated-img {
  transform: rotate(90deg);
}

HTML 代码 #

<div class="container">
  <div class="item">
    <img src="https://www.deckofcardsapi.com/static/img/2D.png" />
  </div>
  <div class="item rotated-item">
    <img class="rotated-img" src="https://www.deckofcardsapi.com/static/img/6C.png" />
  </div>
  <div class="item">
    <img src="https://www.deckofcardsapi.com/static/img/7D.png" />
  </div>
</div>

现在的问题是，用transform: rotate(90deg)旋转图片后，图片的占位空间还是原来的尺寸，导致旋转后的图片会和旁边的图片重叠，而且容器也没有根据旋转后的图片尺寸自动调整。我试过调整.rotated-item的样式，但不知道怎么让Flex容器正确识别旋转后的图片实际占用的空间。

有没有大佬能指点一下，怎么让容器自动适配旋转后的图片，避免出现重叠的情况呢？

内容来源于stack exchange