html - 如何修复 div 中的 div 高度和图像大小？

Question

我正在尝试使用带有引导程序的 2 个列表进行角度 cdk 拖放。第一个列表只有一个主图像，第二个列表有其他相同大小的图像。

我有什么（非常糟糕）：

HTML：

 <div class="card mb-4" style="max-height: 20rem">
            <div class="card-body">
                <div class="card-title mb-3"><strong>Media</strong></div>
                <div class="row" style="max-height: 100%" cdkDropListGroup>
                    <div class="col-8" style="height: 100%;">
                      <div
                        cdkDropList
                        [cdkDropListData]="images1"
                        class=""
                        (cdkDropListDropped)="drop($event)">
                        <div class="" *ngFor="let item of images1" cdkDrag><img [src]="item" alt=""></div>
                      </div>
                    </div>
                  
                    <div class="col-4 row" style="height: 100%; max-height: 100%; overflow-x: hidden; 
                    overflow-y: scroll;">
                      <div
                        cdkDropList
                        [cdkDropListData]="images2"
                        class=""
                        (cdkDropListDropped)="drop($event)">
                        <div class="col-12 d-flex" *ngFor="let item of images2" cdkDrag><img [src]="item" alt=""></div>
                      </div>
                    </div>
                  </div>
            </div>
        </div>

我想要的是：

标签： htmlcssangularbootstrap-4angular-material