柔性箱内的div收缩包装(Making divs inside flex boxes shrink

如何才能让这些div flex盒子缩水呢？

IE浏览器。 使这些：

进入这些：

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

就好像一个人要设置flex-direction: row; 除了我不能让他们在同一行上。

.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> 
  
 
How would one go about making these div flex boxes shrink-wrap?
 
Ie. making these:
 
 
Into these:
 
 
http://jsfiddle.net/frank_o/35hk7L84/1/
 
As if one were to set flex-direction: row; except I can't have them on the same line.
 
 
 
  
  
.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> 
  
 

                
最满意答案
                
                    
                        
 以下是您正在查找的内容（更改各个元素的display ）： 
 
 
 
  
  
.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/ 
Here is what you are looking for (change the display of the individual elements):
 
 
 
  
  
.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> 
  
 
 
Useful resources: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes
 
Other: http://css-tricks.com/snippets/css/a-guide-to-flexbox/