CSS/AngularJS溢出-x

Question

我需要一些css帮助。你可以看到，如果你点击右边添加另一个六边形，我希望它溢出到右边。它跳下来创建一个新的行。我怎样才能让它溢出滚动x？

这是css。

#flow { 
    width: 600px; 
    height: 250px; 
    overflow-x: scroll; 
} 

Answer 1

这可能不是最完美的解决方案，但似乎这样的伎俩。 http://jsfiddle.net/L6pke/5/

#container { 
    width: 500px; 
    height: 250px; 
    overflow-x: auto; 
} 
#flow { 
    width: 800px; 
    height:100%; 
} 

而在你的JS代码，你每次添加一个元素时更新流动div的宽度。

var flow = document.getElementById('flow'), 
      current_width = flow.clientWidth; 
flow.style.width = current_width + 104 + 'px'; 

Answer 2

试试这个：

#flow { 
    width: 550px; 
    height: 250px; 
    overflow-x: scroll; 
} 

.hex { 
    display: inline-block; 
    margin-left:3px; 
    margin-bottom:-26px; 
    text-align:center; 
    color:#fff; 
    font-size:1.1rem 
} 

.hex-row { 
    clear:left; 
    white-space: nowrap; 
} 

基本上是：

让.hex显示为inline-block，优于浮动为此，除了与浮它不会起作用，因为从正常流量浮动移除了。

删除.hex-row中的宽度以使其自动化，并将white-space: nowrap添加到其中以删除包装。

http://jsfiddle.net/zargyle/L6pke/3/