HTML5 CSS水平滚动多个动态列数

我在使div水平滚动时遇到问题。 div有一个动态的列数，可以覆盖页面的100%宽度。目前，我将总宽度设置为固定的px宽度（1500px），以获得水平滚动。但是，由于列数是动态的，因此div应该增长以适应中的新列，而不是隐藏div下面的新列

这是我的一张剪纸： 您可以看到可见列中的最后一个输入是“最后一个可见”。输入的下一列是“新看板列表不可见”

如何将div#board容器宽度更改为100%，而不是1500px，并且仍然水平滚动？它的布局与Trello或MeisterTask非常相似

div#main-kanban {
  top: 49px;
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  bottom: 52px;
}

div#content-kanban {
  position: absolute;
  left: 0;
  right: 0px;
  overflow: hidden;
  height: 100%;
  overflow-x: auto;
  background: #e3e3e3;
}

div#board-container {
  width: 1500px;
  top: 49px;
  position: absolute;
  height: 100%;
  overflow: hidden;
}

section#kanban-board {
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  position: absolute;
  margin-bottom: 49px;
}

div.kanban-individual {
  display: inline-block;
  vertical-align: top;
  width: 320px;
  overflow-y: scroll;
  height: 100%;
  float: left;
  background-color: #e3e3e3;
  cursor: pointer;
  -webkit-transition: background 0.3s linear;
  -moz-transition: background 0.3s linear;
  -o-transition: background 0.3s linear;
  -ms-transition: background 0.3s linear;
  transition: background 0.3s linear;
}

---

将css更改为以下内容将很好地工作。使用

显示：flex并从
部分和
板容器中删除
位置：绝对

div#board-container {
  width: 100%;
  height: 100%;
  display:flex;
}

section#kanban-board {
  display:flex;
}

css替换

div#board-container {
  /* overflow: hidden; remove this */
}

section#kanban-board {
  display:flex;
  margin-bottom: 49px;
}

div.kanban-individual {
  flex:0 0 320px;
  vertical-align: top;
  overflow-y: auto;
  height: 100%;
  background-color: #e3e3e3;
  cursor: pointer;
  -webkit-transition: background 0.3s linear;
  -moz-transition: background 0.3s linear;
  -o-transition: background 0.3s linear;
  -ms-transition: background 0.3s linear;
  transition: background 0.3s linear;
}


新链接

我认为用纯css实现这一点并不容易。但是有了一点jquery，它就简单了。请试试下面的样品


$（文档）.ready（函数（）{
var columnCount=$（“.column”）.length；
var columnWidth=$（'.column'）.outerWidth（）；
var colWrapperWidth=（columnCount*columnWidth）+'px'；
$（“.col wrapper”）.css（“宽度”，colWrapperWidth）；
});
.content{
高度：50px；
宽度：500px；
浮动：左；
边框：实心5px红色；
溢出-x：滚动；
溢出y：隐藏；
}
上校包装{
浮动：左；
}
.栏目{
宽度：100px；
边框：纯色2px白色；
浮动：左；
背景：绿色；
颜色：白色；
文本对齐：居中；
线高：20px；
}

专栏01
专栏02
专栏03
专栏04
专栏05
专栏06
专栏07
专栏08
专栏09
使用此

section#kanban-board{ display: inline-flex;}

感谢@ketan和@Carol McKay为我指明了正确的道路。我通过将display:flex-on-div#board容器的高度设置为100%，并使用display:flex-on-div#board容器，成功地使其按需工作

这是你的电话号码

工作小组：

div#main-kanban {
    top: 49px;
    position: absolute; 
    right: 0;
    left: 0;
    bottom:52px;
}

div#content-kanban {
    position: absolute;
    left: 0;
    right: 0px;
    overflow: hidden;
    height: 100%;
    overflow-x: auto;
    background: #e3e3e3;
}

div#board-container {
    width: 100%;
    display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox;      /* TWEENER - IE 10 */
    display: -webkit-flex; 
    display:flex;
    height:100%;
}

section#kanban-board {
    margin-bottom:49px;
    display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox;      /* TWEENER - IE 10 */
    display: -webkit-flex; 
    display:flex;
}

div.kanban-individual {
    display: inline-block;
    vertical-align: top;
    width: 320px;
    overflow-y: scroll;
    float: left;    
    background-color: #e3e3e3;
    cursor: pointer;
    -webkit-transition: background 0.3s linear;
    -moz-transition: background 0.3s linear;
    -o-transition: background 0.3s linear;
    -ms-transition: background 0.3s linear;
    transition: background 0.3s linear;
}

我唯一担心的是IE 8-10和旧版Webkit浏览器缺乏浏览器兼容性。我已经根据添加了一些浏览器黑客
，但对于旧版的IEs来说，它仍然无法正常工作。
这一个几乎就要出现了，只是现在当列大于页面高度时，它们不会垂直滚动。不过，所有的柱子都在水平方向上正确排列，几乎在那里。但仍然无法向下滚动列。滚动条在那里，但不起作用。对不起，还是一样的问题。列应为100%高并滚动，但它们小于100%且不滚动。这不会仍然显示所有列。看不到标题为“此列表已隐藏”的最后一列，谢谢@RhysStephens我丢失了该绘图，答案已编辑。我现在可以看到所有列，但没有一列具有垂直滚动条。当内容溢出时，它们需要单独滚动。我想要的布局示例是：对不起，我只想使用CSS。