强制弯曲元件不沿横轴方向生长

Question

我正在使用垂直菜单制作页面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 black;
}

.menu>* {
  flex-shrink: 0;
}

.separate {
  flex-grow: 1;
}

.statusmessage {
  background-color: magenta;
  align-self: flex-end;
  /*display: none;*/
}

<div class=menu>
  <div class=somechildren>I'd like the menu's</div>
  <div class=somechildren>width to fit nicely</div>
  <div class=somechildren>around these children</div>

  <div class=separate></div>

  <div class=statusmessage>
    While forcing this status message to wrap and grow its height, without affecting the width of the container.
  </div>
</div>
<div class=page>
  The page
</div>

Answer 1

你几乎就在那里width.您需要做的是设置width 和 min-width(演示):

.statusmessage {
 width:0; /* Collapses .statusmessage so it doesn't affect column width */
 min-width:100%; /* Expands .statusmessage to width of column */
}

该width可以(而且也应该)设置为以外的值0.它应该是列的最小宽度或更小.因此,请使用适合您的值.

我已经在Chrome和Firefox上测试过这个版本,但两者似乎都有用.现在,它应该工作吗？我不确定,我没有读过那么多的规范(可能是未定义的).确保在所有需要它的浏览器中进行测试.(并检查规范以查看此行为是否未定义/不正确.)