在柔性盒内制作div收缩包装

Question

如何让这些div柔性盒收缩包装？

IE中。做这些：

进入这些：

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

好像有人设置flex-direction: row;，但我不能将它们放在同一条线上。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以使用以下代码执行此操作。

以获取更多参考，并生成具有所有属性的flex代码，您可以通过以下链接

http://code.tutsplus.com/tutorials/an-introduction-to-the-css-flexbox-module--net-25655

http://the-echoplex.net/flexyboxes/

＆＃13;

＆＃13;

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

以下是您要查找的内容（更改各个元素的display）：

＆＃13;

＆＃13;

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

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

Answer 3

你将得到你需要的东西，即每个具有不同大小的元素，将自身缩小为元素宽度但不使用flex。

＆＃13;

＆＃13;

.other {
	clear:both;
    color: white;
    background: blue;
    margin: 10px;
    float: left;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 4

我已成功完成以下任务：

 width: -moz-max-content;
 width: -webkit-max-content;
 width: max-content;