窗口大小更改时如何不重叠md按钮

Question

我正在创建三个容器。在第一个容器中我使用md-button，第二个容器我有searchBox，第三个容器我有图标都工作正常。但是当窗口大小改变时左侧容器中的按钮重叠。 这是我的代码。

<div id="topBarContainer">
  <!--TopBar-->
  <div id="topBarLeft" class="topBar">
    <input type="button" ng-click="newMenuType('message')" value="New" id="newButton">
  </div>
  <!--Top Bar Middle-->
  <div id="topBarMiddle" class="topBar">
    <div class="searchBoxContainer">
      <i class="fa fa-search fa-flip-horizontal" id="searchBoxIcon">&nbsp;</i>
      <input type="text" placeholder="Search Inbox" class="searchBox" ng-model="searchEmail" />
    </div>
  </div>
  <!--Top Bar Right-->
  <div id="topBarRight" class="topBar">
    <div>
      <div class="loginRow">Hi{{loginName()}}</div>
      <div ng-if="emailIcon()" class="iconRow">
        <i class="fa fa-reply"></i>
      </div>
      <div ng-if="emailIcon()" class="iconRow">
        <i class="fa fa-reply-all"></i>
      </div>
      <div ng-if="emailIcon()" class="iconRow">
        <i class="fa fa-reply fa-flip-horizontal"></i>
      </div>
      <div ng-if="!isDeletedView() && emailIcon()" class="iconRow">
        <i class="fa fa-trash"></i> 
      </div>     
    </div>
  </div>
</div>

这是我的css。

body {
  margin: 0
}
#topBarContainer {
  background-color: blue;
  display: flex;
}
#topBarLeft {
  width: 14%;
  text-align: center;
}
#topBarMiddle {
  text-align: center;
  background: red;
  width: 35%
}
#topBarRight {
  text-align: right;
  background: green;
  flex: 1
}
#topBarRight > div {
  display: inline-flex
}
.topBar {
  text-align: center;
  padding-top: 5px;
  padding-bottom: 3px;
}

当窗口最小化时，如何不重叠md按钮。