如何将物品对齐到他们真正需要的高度

Question

我添加了当前问题的图片。在图片中，您可以看到容器 E114 和容器 E116 比另一侧的容器（E115 和 E117）占用更高的高度。

我的目标是让这些元素只取所需的高度，因此容器 E115 只取该元素的高度，容器 E117 向上移动。

我尝试用 Flexbox 解决这个问题，但没有成功，现在我不知道该怎么做。

这是我的html代码：

<div class="full-height flex padding-m test">
   <div
      class="r-container"
      [ngClass]="selected ? 'opened' : 'closed'"
      >
      <test-component
         *ngFor="let test of test?.test"
         [data]="test"
         class="room flex-c padding-right-m"
      >
      </test-component>
   </div>
   <div
      class="test-container"
         [ngClass]="selected && selected.property ? 'opened' : 'closed'"
      >
      <test2-component
         class="test2"
         >
      </patient-bed>
   </div>
</div>

这是scss代码：

.test {
  height: 100%;
  overflow: auto;
  display: flex;
  flex-direction: row;

  .r-container {
    display: flex;
    flex-wrap: wrap;
  }

  .r-container.opened {
    width: 20%;
    .test-component {
      flex: 100%;
    }
  }

  .r-container.closed {
    width: 100%;
    flex-direction: row;

    .test-component {
      flex: 50%;
    }
  }

  .test-container.opened {
    width: 80%;
  }

  .test-container.closed {
    width: 0%;
  }
}

Answer 1

尝试复制这个例子。代码是反应的，但它与你需要的类似

https://stackblitz.com/edit/vitejs-vite-svin4t?file=src%2FApp.css