css – 在flex框内制作div收缩包装

怎么会让这些div柔性盒收缩包装？

IE浏览器.制作这些：

进入这些：

http://jsfiddle.net/frank_o/35hk7L84/1/

好像有人设置弯曲方向：行;除了我不能让他们在同一条线上.

.main {
    display: flex;
    flex-direction: column;
    /* flex-direction: row; */
}
.other {
    color: white;
    background: blue;
    margin: 10px;
}

<div class="main">
    <div class="other">
        <p>Hello world</p>
    </div>
    <div class="other">
        <p>Hello other world</p>
    </div>
</div>

这是您正在寻找的(更改单个元素的显示)：

.main {
  display: inline-flex;
  flex-direction:column;
}

.other {
    color: white;
    background: blue;
    margin: 10px;   
    display:table;
}

<div class="main">
    <div class="other">
        <p>Hello world</p>
    </div>
    <div class="other">
        <p>Hello other world</p>
    </div>
</div>

有用资源：https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes

其他：http://css-tricks.com/snippets/css/a-guide-to-flexbox/