在开启grid布局或flex布局元素的子元素上添加min-width: 0;
或overflow: hidden;
即可恢复到想要的结果。
.product-list {display: grid; // 开启grid布局的元素grid-template-columns: repeat(5, 19%);justify-content: space-between;margin-top: 10px;row-gap: 8px;&-item {min-width: 0;//overflow: hidden; // min-width 和 overflow 二选一.info {margin-top: 4px;.name {font-size: 10px;color: #000000;white-space: nowrap; // 开启nowrap的元素,导致grid布局被撑开overflow: hidden;}}}}
参考:灰太郎778 关于 white-space: nowrap; 影响 display: flex; 布局的问题