关于display:flex碰上white-space:nowrap的问题

当 display:flex 碰上 white-space nowrap 的时候，会打乱 flex 布局。解决方法：给 flex 布局级设置最小宽度为 0。

示例

当 display:flex 碰上 white-space nowrap，flex布局被打乱了，示例中表现为内部元素超出父元素范围（可能存在其他情况）。

解决方法：

给flex布局级（例：设置“flex：1；”的子盒子）设置最小宽度为0

HTML

<div class="form-list">
    <div class="form-name">
        <span class="form-star">*</span>姓名：
    </div>
    <input type="text" data-type="name" data-form="1" class="form-input" />
</div>

CSS

.form-list  {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    width: 6.53333rem;
    height: 1.06667rem;
}
.form-name {
    color: #474747;
    font-size: 0.4rem;
    white-space: nowrap;
    min-width: 0;     /* 重要！！！ */
}
.form-input {
    border: none;
    flex: 1;
    padding-left: 0.26667rem;
    outline: none;
    color: #000000;
    font-size: 0.4rem;
    min-width: 0;     /* 重要！！！ */
    background-color: transparent;
}