从理论上讲，CSS网格单元应该增长以容纳更大的内容。在以下示例中如何实现？当我缩小窗口时，蓝色框伸出白色框。
body{
background: lightgrey;
}
.wrapper {
padding: 20px;
}
.subscription-items {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
grid-gap: 8%;
}
.subscription-item {
position: relative;
display: inline-block;
background: white;
padding: 20px;
}
.subscription-item-btn {
display: inline-block;
background: blue;
color: white;
padding: 13px;
white-space: nowrap;
min-width: calc(100% - 20px);
}
.subscription-item-price {
font-size: 20px;
font-weight: bold;
}<!DOCTYPE html>
<html>
<body>
<div class="wrapper">
<div class="subscriptions">
<div class="subscription-items">
<div class="subscription-item">
<a class="subscription-item-btn product-type-full" type="button">
<span class="subscription-item-price" id="monthly-price">12 345,67 EUR</span>
<span class="subscription-item-length"> / month </span>
</a>
</div>
<div class="subscription-item subscription-item-yearly">
<a class="subscription-item-btn product-type-full" type="button">
<span class="subscription-item-price" id="yearly-price">12 345,67 EUR</span>
<span class="subscription-item-length"> / year </span>
</a>
</div>
<div class="subscription-item">
<a class="subscription-item-btn subscription-item-restore-btn" type="button">
Restore
</a>
</div>
</div>
</div>
</div>
</body>
</html>.subscription-item-btn {
display: inline-block;
background: blue;
color: white;
padding: 13px;
/* white-space: nowrap; */
min-width: calc(100% - 20px);
}
删除white-space