浏览器调整大小在元素之间创建空白

Question

在浏览器大小为 100% 时，子元素和它们的父包装之间有一些空白。 但是，如果我将浏览器大小修改为 90%，则不再有空格。 如果我进一步使用浏览器大小，该元素将在空白和无空白之间切换。 知道我在做什么错吗？ 谢谢

css 代码：

.flowpanelContainer {
    display: inline-flex;
    border: .180rem solid COLOR;
    border-radius: 5px;
    color: COLOR;
    font-family: "Roboto",sans-serif;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25) !important;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.gwt-ToggleButton {
    border: none !important;
    background: transparent !important;
    border-right: .180rem solid COLOR !important;
    height: 100% !important;
    outline: none !important;
    border-radius: 0 !important;
    font-weight: 700 !important;
    /*padding: calc(8px + 1.5625vw);*/
    padding: 0.5rem 0.8rem !important;
    letter-spacing: 1px !important;
    transition: all .4s linear !important;
    width: max-content !important;
}