CSS布局：.inp-inline元素溢出容器 点击复选框容器高度异常问题

1. .inp-inline 溢出父容器的原因 #

• 核心冲突来自label的宽度设置和父容器的布局规则：.inp-label-inline是display: inline-block，默认宽度由内部内容收缩撑开，但你给label设置了width: 100%，浏览器计算宽度时会先取父级可用的整行宽度作为基准，让label占满这个宽度，此时父容器宽度就被label撑到了整行宽度。
• 后续的.inp-inline本身也是行内块元素，父容器又设置了white-space: nowrap禁止内容换行，label已经占满父容器全部宽度，.inp-inline没有剩余排布空间，就直接溢出到父容器外部。

2. 点击复选框时父容器高度跳动的原因 #

• 核心是行内元素默认的基线对齐规则：.inp-inline是行内块元素，默认vertical-align: baseline，会和同一行的label做基线对齐。
• 初始状态下#cb_inner宽高为0，.inp-inline内部没有可作为基线参考的行内内容，基线默认对齐到自身下边缘；点击复选框后#cb_inner变为10px宽高，.inp-inline内部的基线位置发生偏移，浏览器为了满足基线对齐规则会自动调整行盒高度，最终表现为父容器高度变化。

直接调整两处CSS即可解决问题：

1. 把.inp-label-inline改为flex布局，去掉label的width:100%，改用flex属性让label自动占剩余宽度，从根源解决宽度计算冲突。
2. 给.inp-inline设置非baseline的垂直对齐规则，避免基线偏移引发跳动。

修复后的核心CSS代码：

.inp-label-inline{
    display:inline-flex; /* 替换原inline-block */
    align-items: center; /* 子元素垂直居中 */
    padding:2px;
    white-space:nowrap;
    background:red;
}

label{
    display:inline-block;
    flex: 1; /* 自动占满剩余宽度，不需要写width:100% */
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    padding:2px;
}

.inp-inline{
    display:inline-block;
    vertical-align: middle; /* 修正默认基线对齐问题 */
}

/* 其余原有样式保持不变即可 */

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