html - 動的に div をコンテナーに追加し、すべて同じ幅にします

Question

ドラッグラで他の div をドロップしたいコンテナがあります。ドロップされた div は、可能であればすべて同じ幅になります (コンテナーの幅 > div の最小幅の合計)。

フレックスボックスを使用すると、これは機能しません (テーブルやリストなどの他のオプションも機能しませんでした)。最初のドロップでは、このドロップされた div が必要に応じて幅の 100% を取ります。ただし、次の div をドロップした後、最初の div のサイズは変更されず、後続のすべての div は最小サイズのみになります。また、コンテナーは、追加のドロップごとに成長しています。

ここに私のコンテナと子供たちのスタイルがあります:

.container {
  width: 100%;
  display: flex;
}
.child{
  width: 100%;
  flex: 0 1 auto;
}

これは、子がドロップされるターゲット HTML コードです (私は angular を使用します)。

<div class="container" [dragula]='"bag-objects"' [dragulaModel]="container">
   <div *ngFor="let object of container" class="child>
      <objects [object]="object.object"></objects>
   </div>
</div>

ここで、stackoverflow で他のさまざまなソリューションをチェックしてテストしましたが、うまくいきませんでした。