根据缩放调整div及其内容的大小

Question

我正在使用以下UI。

当缩放比例为100％时，一切正常。但是当用户放大UI时会受到干扰，并显示如下：

div中的卡未调整大小。我希望所有卡片都采用标题为E的div宽度。将卡片宽度设置为100％会给其他div带来麻烦。随着div的张数大于div E的张数越来越长。

Div E显示一次卡。水平滚动可能会看到多个卡片。同样，div R一次显示3张牌。它可能包含更多卡。缩放时，可见卡片的某些内容被隐藏在Div E中。类似地，Div R中的三张卡片中的最后一张也被部分隐藏。

这是codepen链接：

https://codepen.io/manjuransari143/pen/JjYzbXq

#div_A {
  background-color: #B14C08;
  padding: 5px;
  font-weight: 600;
  color: white;
  font-size: 13px;
}

#div_B {
  background-color: #157668;
  padding: 5px;
  font-weight: 600;
  color: white;
  font-size: 13px;
}

#div_C {
  background-color: #E61B00;
  padding: 5px;
  font-weight: 600;
  color: white;
  font-size: 13px;
}

#div_D {
  background-color: #0078D4;
  padding: 5px;
  font-weight: 600;
  color: white;
  font-size: 13px;
}

#div_E {
  background-color: #0D283D;
  padding: 5px;
  font-weight: 600;
  color: white;
  font-size: 13px;
}

.holder {
  min-height: 240px;
  padding: 0 2px 0 2px;
}

.holder .card_holder {
    padding: 0; 
    max-width: 290px;
}

.holder .xyz {
  overflow-x: auto; 
  min-height: 240px;
}


.shortdetail {
	display: flex;
}

*,*:before, *:after {
	box-sizing: border-box;
}
.content {
	width: 287px;
	position: relative;
	animation: animatop 0.9s cubic-bezier(0.425, 1.14, 0.47, 1.125) forwards;
}

.card {
	width: 100%;
	height: 80px;
	padding: 0px;
	border: 0px;
	border-top-left-radius: 0px;
	border-top-right-radius: 0px;
	background-color: white;
	position: relative;
	overflow: hidden;
}


.shortdetail {
	margin: 5px;
	flex-direction: row;
	z-index: 2;
	position: relative;
}

.profileinfo {
	width: 100%;
	margin: 0px 10px;
	color: #5a5a5a;
	line-height: 1.2;
	font-style: initial;
}

.profileinfo .row {
	margin: 0;
}

.profileinfo .col-8, .col-4 {
	padding: 0;
}

.profileinfo label {
	margin-bottom: 0px;
}

.name {
	font-size: 13px;
	font-weight: 600;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">

<div class="col-8">
  <div class="row rounded-top" style="background-color :#405755; color: white; font-weight: 600;">
    <span class="col" style="padding: 5px; padding-left: 8px; font-size: 14px;">List</span>
  </div>
  <div class="row border border-primary" style="padding: 5px 0 5px 0;">
    <div class="row" style="margin: 0px; margin-bottom:3px; width: 100%;">
      <div class="col-3 holder">
        <div class="rounded-top" id="div_A">
          Div A <button>Prev</button> <button>Next</button>
        </div>
        <div class="d-flex flex-row xyz">
          
          <div class="card_holder">
            <div class="content">
              <div class="card" style="background-color: #F8F6F4">
                <div class="shortdetail">
                  <div class="profileinfo">
                    <label class="name" >Random Name</label><br />
                    <label style="font-size: 12px;">Dummy</label>
                    <div class="row" style="font-size: 12px;">
                      <span class="col-8">dummy</span>
                      <span class="col-4 text-right">dummy</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          
          <div class="card_holder">
            <div class="content">
              <div class="card" style="background-color: #F8F6F4">
                <div class="shortdetail">
                  <div class="profileinfo">
                    <label class="name" >Random Name</label><br />
                    <label style="font-size: 12px;">Dummy</label>
                    <div class="row" style="font-size: 12px;">
                      <span class="col-8">dummy</span>
                      <span class="col-4 text-right">dummy</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          
        </div>
      </div>
      <div class="col-9 holder">
        <div class="rounded-top" id="div_B">
          Div B
        </div>
        <div class="d-flex flex-row xyz">
          
          <div class="card_holder" style="margin-right: 20px">
            <div class="content">
              <div class="card" style="background-color: #F8F6F4">
                <div class="shortdetail">
                  <div class="profileinfo">
                    <label class="name" >Random Name</label><br />
                    <label style="font-size: 12px;">Dummy</label>
                    <div class="row" style="font-size: 12px;">
                      <span class="col-8">dummy</span>
                      <span class="col-4 text-right">dummy</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          
          <div class="card_holder" style="margin-right: 20px">
            <div class="content">
              <div class="card" style="background-color: #F8F6F4">
                <div class="shortdetail">
                  <div class="profileinfo">
                    <label class="name" >Random Name</label><br />
                    <label style="font-size: 12px;">Dummy</label>
                    <div class="row" style="font-size: 12px;">
                      <span class="col-8">dummy</span>
                      <span class="col-4 text-right">dummy</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          
          <div class="card_holder" style="margin-right: 20px">
            <div class="content">
              <div class="card" style="background-color: #F8F6F4">
                <div class="shortdetail">
                  <div class="profileinfo">
                    <label class="name" >Random Name</label><br />
                    <label style="font-size: 12px;">Dummy</label>
                    <div class="row" style="font-size: 12px;">
                      <span class="col-8">dummy</span>
                      <span class="col-4 text-right">dummy</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          
          <div class="card_holder">
            <div class="content">
              <div class="card" style="background-color: #F8F6F4">
                <div class="shortdetail">
                  <div class="profileinfo">
                    <label class="name" >Random Name</label><br />
                    <label style="font-size: 12px;">Dummy</label>
                    <div class="row" style="font-size: 12px;">
                      <span class="col-8">dummy</span>
                      <span class="col-4 text-right">dummy</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-3 holder">
        <div class="rounded-top" id="div_C">
          Div C
        </div>
        <div class="d-flex flex-row xyz">
          <div class="card_holder">
            <div class="content">
              <div class="card" style="background-color: #F8F6F4">
                <div class="shortdetail">
                  <div class="profileinfo">
                    <label class="name" >Random Name</label><br />
                    <label style="font-size: 12px;">Dummy</label>
                    <div class="row" style="font-size: 12px;">
                      <span class="col-8">dummy</span>
                      <span class="col-4 text-right">dummy</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-6 holder">
        <div class="rounded-top" id="div_D">
          Div D
        </div>
        <div class="d-flex flex-row xyz">
          <div class="card_holder" style="margin-right: 20px">
            <div class="content">
              <div class="card" style="background-color: #F8F6F4">
                <div class="shortdetail">
                  <div class="profileinfo">
                    <label class="name" >Random Name</label><br />
                    <label style="font-size: 12px;">Dummy</label>
                    <div class="row" style="font-size: 12px;">
                      <span class="col-8">dummy</span>
                      <span class="col-4 text-right">dummy</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          
          <div class="card_holder" style="margin-right: 20px">
            <div class="content">
              <div class="card" style="background-color: #F8F6F4">
                <div class="shortdetail">
                  <div class="profileinfo">
                    <label class="name" >Random Name</label><br />
                    <label style="font-size: 12px;">Dummy</label>
                    <div class="row" style="font-size: 12px;">
                      <span class="col-8">dummy</span>
                      <span class="col-4 text-right">dummy</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          
          <div class="card_holder" style="margin-right: 20px">
            <div class="content">
              <div class="card" style="background-color: #F8F6F4">
                <div class="shortdetail">
                  <div class="profileinfo">
                    <label class="name" >Random Name</label><br />
                    <label style="font-size: 12px;">Dummy</label>
                    <div class="row" style="font-size: 12px;">
                      <span class="col-8">dummy</span>
                      <span class="col-4 text-right">dummy</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-3 holder">
        <div class="rounded-top" id="div_E">
          Div E
        </div>
        <div class="d-flex flex-row xyz">
          <div class="card_holder">
            <div class="content">
              <div class="card" style="background-color: #F8F6F4">
                <div class="shortdetail">
                  <div class="profileinfo">
                    <label class="name" >Random Name</label><br />
                    <label style="font-size: 12px;">Dummy</label>
                    <div class="row" style="font-size: 12px;">
                      <span class="col-8">dummy</span>
                      <span class="col-4 text-right">dummy</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>