我的HTML如下：
<div class="product_details_container" fxLayout.xs="column" fxLayoutGap="15px">
<mat-card fxFlex="30" fxFlex.xs="100" class="image_container">
<img mat-card-image src="../../../assets/img/img1.jpg" alt="">
<mat-card-header >
<img mat-card-avatar>
<mat-card-title>The Silver Dress</mat-card-title>
<mat-card-subtitle>Available in silver and gold.</mat-card-subtitle>
</mat-card-header>
</mat-card>
<mat-card fxFlex="40" class="" class="product_details">
<mat-card-header fxLayout.xs="column">
<mat-card-title class="contact_us">
Buy Now. Contact us today using the following:
</mat-card-title>
</mat-card-header>
<mat-card-content >
<button mat-button>
<mat-icon svgIcon="facebookIcon"></mat-icon>
</button>
<button mat-button>
<mat-icon svgIcon="linkedinIcon"></mat-icon>
</button>
<button mat-button>
<mat-icon svgIcon="twitterIcon"></mat-icon>
</button>
<button mat-button>
<mat-icon svgIcon="instagramIcon"></mat-icon>
</button>
<button mat-button>
<mat-icon>email</mat-icon>
</button>
</mat-card-content>
<mat-card-header >
<mat-card-title>
Product Description
</mat-card-title>
</mat-card-header>
<mat-card-content>
Acne Studios's sky-blue and white check Albany short-sleeved shirt is made from a lightweight textured cotton and linen-blend
to an oversized fit with classic elements. The defined shape is softened with a box-pleat at the back and a curved hem. Fits
true to size. Shown here with Marni Point-collar zip-through jacket , Bottega Veneta Straight-leg chino trousers and Prada
Low-top Velcro trainers. Product number: 1191635
</mat-card-content>
<mat-card-header>
<mat-card-title>
Product Details
</mat-card-title>
</mat-card-header >
<mat-card-content>
<mat-list fxFlex="70">
<mat-list-item> 50% Cotton </mat-list-item>
<mat-list-item> Dry Clean </mat-list-item>
<mat-list-item> Blue, Black </mat-list-item>
</mat-list>
<mat-card fxFlex="30" class="product_price mat-elevation-z0">
<mat-card-title> Price </mat-card-title>
<mat-card-content> R450 </mat-card-content>
</mat-card>
</mat-card-content>
</mat-card>
组件的 CSS 代码：
.product_details_container {
height: 100vh;
padding: 70px 10px 10px 10px;
overflow-y: scroll;
.image_container {
// background-color: green;
}
.product_details {
background-color: green;
mat-card-header {
border-bottom: 1px solid rgb(235, 234, 234);
mat-card-title {
font-size: 16px;
font-weight: bold;
color: rgb(136, 136, 136);
}
.contact_us {
color: rgb(196, 127, 127);
// background-color: red;
}
}
mat-card-content {
color: rgb(136, 136, 136);
padding-bottom: 5px;
line-height: 25px;
mat-list {
mat-list-item {
color: rgb(136, 136, 136);
height: 30px;
font-size: 14px;
}
}
button {
margin-top: 15px;
}
.product_price {
padding: 0;
mat-card-title {
color: rgb(136, 136, 136);
height: 30px;
font-size: 15px;
padding-top: 10px;
}
mat-card-content {
color: green;
font-size: 20px;
font-weight: bolder;
}
}
}
}
}
上面的代码给出了如下图所示的输出：
我的问题是我似乎无法获得绿色垫卡的高度以适应其内容，例如height: auto;您能否帮助我解决我可能做错的事情，或者建议一种更好的方法来实现要求的行为。另外值得一提的是，在台式机上高度可以很好地调整，只有在移动设备上它没有做到这一点。如果我对高度进行硬编码，它可以工作，但此时这是不可取的。没有 CSS 应用于管理此 mat-card 的类。
编辑 .product_details mat-card
<mat-card fxFlex="40" class="" class="product_details">
<mat-card-header >
<mat-card-title>
Product Description
</mat-card-title>
</mat-card-header>
<mat-card-content>
Acne Studios's sky-blue and white check Albany short-sleeved shirt is made from a lightweight textured cotton and linen-blend
to an oversized fit with classic elements. The defined shape is softened with a box-pleat at the back and a curved hem. Fits
true to size. Shown here with Marni Point-collar zip-through jacket , Bottega Veneta Straight-leg chino trousers and Prada
Low-top Velcro trainers. Product number: 1191635
</mat-card-content>
</mat-card>