如何使容器适合重叠图像的内容

Question

我有一个问题已经困扰了一段时间。 容器不适合图像尺寸，当我使用位置：图像绝对值时，第二列似乎是第一列。

我尝试更改每个项目的position属性，但是它不起作用。

<div class="container">
  <div class="d-flex flex-row">
    <div class="p-12">
      <img class="e2e-trusted-url" src="data:image/png;base64,{{backgroundsList[currentBackground].image_url}}"
       style="position: absolute">
      <img class="e2e-trusted-url" src="data:image/png;base64,{{outlineColor.image_url}}"
       style="position: absolute">
      <img class="e2e-trusted-url" src="data:image/png;base64,{{fillingColor.image_url}}"
       style="position: absolute">
    </div>
    <div class="p-2" style="color: white">Form is going to be here</div>
  </div>
</div>

我想制作由两个div组成的两个“列”。第一列应包括三个彼此重叠的相同大小的rgba图像（由于绝对位置），第二列应为表格。并且容器应适合整个弯曲行。

谢谢您的帮助！