我正在试图弄清楚如何解决我在使用CSS和flexbox时遇到的布局问题 对于某些窗口大小，flexbox在其边框和内部元素之间留下间隙，显示flexbox的背景。
我的显示器是1920x1080。我正在使用铬。
当我最大化窗口时，可变宽度flexbox（60％）没有间隙或空白，并且不显示背景。
当我将窗口调整到我的显示器的一半（960x1080）时，flexbox的边框与框内某处的元素之间始终存在一个像素的间隙。
在我正在使用的生产代码中，差距在左边，但由于某种原因，我提供的代码中的差距在右边。
Codepen：http://codepen.io/anon/pen/vgOBpB
有谁知道这方面的解决方案？我希望内容始终完全填充Flexbox
我认为这可能与两个元素上都有flex-grow: 1有关，其中一半的flexbox宽度不是一个整数。因此，这些元素既可以向下舍入，也可以与边缘相距一次。
谢谢！
编辑：如果您知道如何提供帮助，则无需在此处阅读，但我提供了许多可能有用的其他详细信息。
当我调整大小并且窗口达到823像素时，元素会留下空隙。但是，当我调整大小并且窗口达到831像素时，元素到达一个像素太远！这有什么用呢？
width: 50%代替flex-grow: 1也会发生这种情况。
显然，在一个内部元素上只有一个弹性框和flex-grow:1也会发生这种情况。 flexbox无法正确调整内容的大小。
我认为它可能与overflow:hidden直接相关，但我不想因为圆形边框而摆脱这种功能。
最重要的是，当我删除transition: translateZ(0)时，差距就会消失。但是，这是我知道在动画内容时保留overflow: hidden的唯一方法。
答案 0 :(得分：0)
我找到了一个答案。似乎这个bug与flexbox直接相关，所以我已将容器更改为display: table。
我试图这样做是为了让元素能够锚定到顶部或底部，并且仍然可以动画而不会延伸到边界半径的边界之外。
我有解决方案将单独动画元素锚定到顶部和底部。
顶部：http://codepen.io/anon/pen/WRvorw
下图：http://codepen.io/anon/pen/GrJNWK
忽略元素的命名，我没有从初始演示中重命名它们。