Browser resize creates whitespaces between elements

At 100% size of the browser, there are some white spaces between child elements and their parent wrapper. However, if I modify the browser size to say 90% there are no more white spaces. If I further play with the browser size, that element will toggle between white spaces and no white spaces. Any idea what am I doing wrong? Thanks

css code:

.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;
}