相关疑难解决方法(0)

我有一个有两列的布局 - 左边div和右边div.

右边div有灰色background-color,我需要它根据用户浏览器窗口的高度垂直展开.现在是background-color最后一段内容的结尾div.

我试过了height:100%,min-height:100%;等等

我正在研究嵌套的flexbox布局,它应该如下工作:

最外层(ul#main)是一个水平列表,当添加更多项时,它必须向右扩展.如果它变得太大,应该有一个水平滚动条.

#main {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    /* ...and more... */
}

此list(ul#main > li)的每个项目都有一个header(ul#main > li > h2)和一个内部列表(ul#main > li > ul.tasks).此内部列表是垂直的,应在需要时包装到列中.当包装到更多列时,其宽度应该增加,以便为更多项目腾出空间.此宽度增加也应适用于外部列表的包含项.

.tasks {
    flex-direction: column;
    flex-wrap: wrap;
    /* ...and more... */
}

我的问题是当窗口的高度太小时内部列表不会换行.我已经尝试了很多篡改所有的flex属性,试图仔细遵循CSS-Tricks的指导,但没有运气.

这个JSFiddle显示了我到目前为止所拥有的内容.

预期结果 (我想要的):

实际结果 (我得到的):

较旧的结果 (我在2015年得到的):

UPDATE

经过一番调查,这开始看起来像一个更大的问题.所有主流浏览器的行为方式都相同,而且与我的嵌套Flexbox设计无关.更简单的flexbox列布局拒绝在项目换行时增加列表的宽度.

这其他的jsfiddle清楚地表明了问题.在当前版本的Chrome,Firefox和IE11中,所有项目都正确包装; 列表的高度在row模式中增加,但其宽度在column模式下不会增加.此外,在更改column模式的高度时,根本没有立即回流元素,但存在row模式.

然而,官方规范 …

我试图在一个具有设定高度的容器中将多个项目放在彼此之下.如果没有空间,物品将彼此相邻.

这是个主意:

我试图使用flexbox实现这一点,flexbox是一个设置高度的容器,方向设置为column并且flex-wrap是wrap:

问题是列之间存在很大差距.

我试着设置都justify-content和align-items到flex-start,但是这可能是默认值.

有什么方法可以解决这个问题吗？

这是代码:

* {
  box-sizing: border-box;
}
body {
  font-family: sans-serif;
}
.container {
  display: flex;
  flex-wrap: wrap;
  height: 300px;
  flex-direction: column;
  background-color: #ccc;
}
.items {
  width: 100px;
  height: 100px;
  margin: 10px;
  background-color: tomato;
  color: white;
  font-size: 60px;
  font-weight: bold;
  text-align: center;
  padding: 15px;
}

<div class="container">
  <div class="items">1</div>
  <div class="items">2</div>
  <div class="items">3</div>
  <div class="items">4</div>
  <div class="items">5</div>
</div>

codepen