关于inline-block和flex对布局的疑惑？

Question

html:

<div class="wrapper">
    <div class="box'>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
</div>

css:

.wrapper {
    width: 600px;
    overflow: hidden;
}
.box {
    min-width: 100%;
    height: 200px;
    background: red;
    float: left;
    fontsize: 0;
}
.item {
    width: 150px;
    height: 100px;
    background: blue;
    display: inline-block;
}

这段css的主要目的是想让子元素item撑开box的宽度,设想是box被撑开后宽度为750px,但是结果box的宽度并没有被撑开。当我在box中添加display:flex后，box宽度就被撑开了？这是什么原理？

Answer 1

本身item就是block块级元素 inline-block让他在一行显示 但是他还是属于行内块级元素 本身没有脱离标准流 肯定会换行
有点跟flex相反 flex是绝对不会换行 那么这两个中间就需要一个css换行来整理
第一种不想让他换行就用white-space:nowrap
第二种想让他换行那就flex-wrap:wrap