Flex布局下右侧Div卡片右侧边框不显示问题求助

问题原因 #

你遇到的右侧卡片边框消失问题，核心是CSS盒模型的计算逻辑导致的：
默认CSS盒模型为content-box，元素设置的width仅指代内容区域宽度，border和padding会额外增加元素总宽度。

你的.image元素设置了width: calc(50% - 5px)，但内部.image-container还有1px边框，这使得每个.image的实际总宽度变为 calc(50% -5px) + 2px（左右边框各1px）。当flex-wrap换行后，第二行右侧元素的总宽度加上gap会超出容器宽度，最终被容器溢出隐藏截断，因此右边框无法显示。

解决方案 #

这里提供几个简单可行的解决办法：

方法1：开启border-box盒模型（推荐） #

给.image元素设置box-sizing: border-box，让元素的width包含border和padding宽度，避免总宽度溢出：

.image { 
  width: calc(50% - 5px);
  box-sizing: border-box; /* 关键属性 */
}

若想避免后续其他元素遇到类似问题，可直接全局设置盒模型：

* {
  box-sizing: border-box;
}

方法2：调整宽度计算值 #

手动将边框宽度从.image的width中减去，让总宽度刚好适配容器分配的空间：

.image { 
  width: calc(50% - 5px - 2px); /* 减去左右边框的2px总宽度 */
}

不过这种方法灵活性较差，后续修改边框宽度时需要同步调整计算式。

方法3：把边框移到外层元素 #

将边框样式直接加到.image元素上，配合border-box使用，逻辑更直观：

.image { 
  width: calc(50% - 5px);
  box-sizing: border-box;
  border: 1px solid var(--IDNFNGS-dropdown-selected);
}

同时移除.image-container的边框样式即可。

内容的提问来源于stack exchange，提问作者IonicMan