CSS - 当窗口更改大小时，行内容不会更改大小

Question

当窗口大小减小时，行内容不会改变其大小。
问题是每个元素的样式-flex: 0 0 100px
不可生长(0)，不可收缩(0)，并且初始长度为100px
如何替换此样式以看起来相同，但将响应窗口大小减少。
现在没有flex: 0 0 100px，它将不是直线顺序，并且每个元素不会在下一个元素的行之上

用array.map((obj, index) => {return ( <div，但我在这里只用了两个元素。

codesandbox -两行

如果在代码盒中查看它更好，请告诉我，我会删除下面的代码片段。

.product-row {
background-color: rgba(202, 226, 245, 0.658);
border: 1px solid black;
border-bottom-width: 3;
border-top-width: 0;
border-left-width: 0;
}
.object-elements {
display: flex;
flex-direction: row;
}
.product-name {
box-sizing: border-box;
font-size: larger;
padding: 10px;
font-weight: 600;
flex: 0 0 210px;
}
.price {
font-size: larger;
padding: 10px;
font-weight: 600;
padding-left: 16px;
padding-right: 16px;
flex: 0 0 100px;
}
.quantity-button {
font-size: larger;
padding: 10px;
font-weight: 600;
flex: 0 0 160px;
}
.quantity {
display: inline-block;
width: 20px;
text-align: center;
}
.add-remove {
width: 3rem;
font-size: 1.5rem;
text-align: center;
text-shadow: 0 1px 0 rgba(#fff, 0.6);
cursor: pointer;
border-radius: 10px;
margin: 5px;
border-width: thin;
}
.total-price {
font-size: larger;
font-weight: 600;
padding: 10px 0px 0px 50px;
flex: 0 0 100px;
}
.product-img {
border: 1px solid black;
width: 100px;
height: 100px;
}

<div class="product-row">
<div class="object-elements">
<img src="https://image.freepik.com/free-vector/realistic-vitamin-complex-package_52683-35815.jpg" ' alt="" class="product-img" />
<div class="product-name">butterfly</div>
<div class="price"> 30$</div>
<div class="quantity-button">
<button class="add-remove">-</button>
<div class="quantity">23</div>
<button class ="add-remove">+</button>
</div>
<div class="total-price">230$</div>
</div>
</div>

在这个代码片段中，总价">

Answer 1

使用rem来调整HTML的大小以适应设备屏幕的宽度

内容从div溢出。为了避免这种情况，我们需要在右侧提供padding。

.product-row {
background-color: rgba(202, 226, 245, 0.658);
border: 1px solid black;
border-bottom-width: 3;
border-top-width: 0;
border-left-width: 0;
padding-right: 35rem;
}

和整个页面响应基于屏幕的宽度。将每个px转换为rem

如果您希望页面上的所有内容都根据宽度改变其大小。然后尝试将font-size和width转换为rems。

查看更新的代码。

Answer 2

尝试添加max-width: 100px;,max-width: 100px;因此，它不会扩展或收缩，但具有响应性