如何实现单div双列不等宽布局并阻止文本水平溢出，右列窄30px

问题根因 #

• CSS原生column-*多列布局默认强制所有列等宽，目前没有支持不等宽列的标准属性，无法直接实现右列比左列窄30px的需求
• 给子元素设置负margin-right只会让子元素整体向右侧偏移超出父容器，不会调整内部列的宽度，反而会加重溢出问题

可行解决方案 #

使用CSS Grid布局实现不等宽双列，无需修改现有HTML结构，仅调整.child的CSS样式即可，完美满足右列比左列窄30px、文本自动换行、不溢出父容器的要求：

.child {
  display: grid;
  /* 左列宽度1fr，右列宽度比左列少30px */
  grid-template-columns: 1fr calc(1fr - 30px);
  /* 列间距30px */
  gap: 30px;
  /* 兜底处理连续无空格长文本的强制换行，正常自然文本可省略 */
  word-break: break-all;
}

效果验证 #

父容器宽度为400px时，左列宽度为200px、右列宽度为170px、中间间距30px，总宽度刚好等于父容器宽度，文本会自动在列内换行，不会溢出浅灰色父容器。

内容的提问来源于stack exchange，提问作者Simon R.