相关疑难解决方法(0)

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

我正在尝试创建一个flexbox布局,它做了一些我认为会更容易的事情,但是我找不到正确的方法.

我希望有一排具有动态高度的项目,允许一个孩子根据需要增长,但限制其他项目的高度,以便切断内容.

我想使用flexbox,因此与此相关的浏览器问题不是问题,但我想避免在解决方案中使用JavaScript.

有任何想法吗？这可能是一个微不足道的问题,但我无法使用我一直在使用的搜索词找到任何内容.谢谢!

这是一个CodePen演示,以防您想要修改它以便在您的答案中使用.

这是我的参考flexbox布局:

.row {
    display: flex;
}

.info {
    flex: 0 0 200px;
}

.description {
    flex: 1 1 auto;
}

<div class="row">
    <div class="info">This should grow dynamically</div>
    <div class="description">This should be limited in height by the .info div</div>
</div>

我把两个div包裹在一个包装内,两者都有动态高度:

#wrapper {
  display: flex;
}

<div id="wrapper">
  <div id="left">dynamic content, height could be more or less than #right</div>
  <div id="right">dynamic content, height could be more or less than #left</div>
</div>

左div应该始终是包装器高度的主要因素.有没有办法单靠css做到这一点？

列的宽度是已知的,我正在使用Bootstrap网格布局.

我知道通过给予#wrapperdiv display: flex,孩子们的div等于身高.是否有一些属性告诉浏览器#left高度始终wrapper是高度,无论内容是否小于#right？我一直在阅读Flexbox的完整指南,但这样的属性似乎不存在.

这张照片让我的问题更加清晰: