小编Tho*_*wen的帖子

我正在使用垂直菜单制作页面display: flex;.我希望菜单的宽度能够贴合几个按钮,而不必使用固定的宽度.

但是,我还希望菜单框有一个状态消息,可以有很长的文本.我希望这个status-div具有菜单的宽度,而不是强制菜单容器增加其宽度.相反,status-div应该增加其高度并包装文本.

用文字解释这个很难,所以我建议你看看这个小提琴:http://jsfiddle.net/bXL3q/

注意差别设置时.statusmessage到display: none;.

任何想法,或者是我想做的不可行？..应该是吗？

我尝试过的:

• width: 100% 失败,显然它只是假定父宽度
• width: -webkit-min-content 一些作品,但它使元素太窄
• flex-basis并flex-grow影响元素的高度,并且不影响宽度
• position: absolute 将解决宽度问题,但现在我无法定义status-div的高度..(为了在高度较小的窗口中强制滚动条 - 而不是仅仅流过按钮元素)

body {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-flow: row nowrap;
  align-items: stretch;
}

.page {
  flex-grow: 1;
  background-color: yellow;
}

.menu {
  background-color: red;
  height: 100%;
  display: flex;
  flex-flow: column nowrap;
}

.somechildren {
  white-space: nowrap;
  background-color: green;
  border: 1px solid …

我有一个宽度固定,高度可变的容器.我用不明数量的元素填充容器.我希望这些元素能够在列中排列,从上到下,然后从左到右.

我可以使用column,但我不知道子元素的最大宽度,所以我不能设置column-width或column-count.

我觉得display: flex有flex-flow: column wrap是要走的路,但如果我保持height: auto在容器上,它将会像一列没有包装元素使用所有可用的宽度.

我可以说服flexbox使用所有可用的宽度,从而最大限度地减少容器的高度吗？你会建议一个不同的解决方案？

小提琴:http://jsfiddle.net/52our0eh/

资源:

HTML:

<div>
    <span>These</span>
    <span>should</span>
    <span>arrange</span>
    <span>themselves</span>
    <span>into</span>
    <span>columns,</span>
    <span>using</span>
    <span>all</span>
    <span>available</span>
    <span>width</span>
    <span>and</span>
    <span>minimizing</span>
    <span>the</span>
    <span>container's</span>
    <span>height.</span>
</div>

CSS:

div {
    outline: 1px solid red;
    width: 100%;
    display: flex;
    flex-flow: column wrap;
    align-items: flex-start;
    /*height: 8em;*/
}
span {
    outline: 1px solid blue;
}