【发布时间】：2017-01-06 08:56:52
【问题描述】：
我正试图弄清楚如何解决我在使用 CSS 和 flexbox 时遇到的布局问题。
对于特定的窗口大小，flexbox 会在其边框和内部元素之间留下空隙，从而显示 flexbox 的背景。
我的显示器是 1920x1080。我正在使用 chrome。
当我最大化我的窗口时，可变宽度的 flexbox（60%）没有间隙或空白，并且不显示背景。
当我将窗口的大小调整为显示器的一半时（960x1080），flexbox 的边框和盒子上某处的元素之间总是存在一个像素的间隙。
在我使用的生产代码中，空白在左侧，但由于某种原因，我提供的代码中的空白在右侧。
Codepen：http://codepen.io/anon/pen/vgOBpB
有人知道这个的解决方案吗？我希望内容始终完全填满弹性框。
我认为这可能与在两个元素上都有flex-grow: 1 有关，其中flexbox 宽度的一半不是整数。因此，元素确定为向下舍入，并且总和与边缘相距一。
谢谢！
编辑：如果您知道如何提供帮助，则不必在此处阅读过去，但我提供了许多可能有用的其他详细信息。
当我调整大小并且我的窗口达到 823 像素时，元素会留下一个间隙。但是，当我调整大小并且窗口达到 831 像素时，元素会达到 一个像素太远！这有什么意义？width: 50% 代替 flex-grow: 1 也会发生这种情况。
显然，它也会发生在单个内部元素上只有一个 flexbox 和 flex-grow:1 的情况下。 flexbox 无法适当地调整内容的大小。
我认为它可能与overflow:hidden 直接相关，但我不想因为圆角边框而摆脱该功能。
最重要的是，当我删除 transition: translateZ(0) 时，差距就消失了。但是，这是我知道在为内容制作动画时保留overflow: hidden 的唯一方法。
【问题讨论】：
标签： jquery css google-chrome