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的高度..（为了在高度较小的窗口中强制滚动条 - 而不是仅仅流过按钮元素）

＆＃13;

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;*/
}

＆＃13;

<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>

＆＃13;

Answer 1

你几乎与width在一起。您需要做的是设置width 和 min-width（demo）：

.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上对此进行了测试，但两者似乎都有效。现在，应该工作吗？我不确定，我还没有读到the spec那么多（可能是未定义的）。确保在所有需要它的浏览器中进行测试。（并检查规范以查看此行为是否未定义/不正确。）

Answer 2

width: 0; min-width: 100%;对我不起作用。

相反，我设置了

position: relative;

在flex子上并用

将其内容包装在内部div中

position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;

这样可以防止内容对弹性容器大小有贡献，同时仍然匹配其余flex子项确定的横轴大小。

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

2 个答案: