title: Browser resize creates whitespaces between elements
body: <p>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</p>
  <p>css code:</p>
  <pre><code>.flowpanelContainer {
      display: inline-flex;
      border: .180rem solid COLOR;
      border-radius: 5px;
      color: COLOR;
      font-family: &quot;Roboto&quot;,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;
  }
  </code></pre>
  <p><a href="https://i.stack.imgur.com/ByTFj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ByTFj.png" alt="enter image description here" /></a></p>