Vue材质自适应布局在较大的屏幕尺寸上不起作用

Question

在中型和大型屏幕上，我希望“过滤”框及其内部的内容占据大部分行，并为“添加联系人”和“下载”按钮保留固定的大小（对于中型屏幕，尝试70-30，对于较大的屏幕，则为80-20），并且具有较小屏幕尺寸的“添加联系人”和“下载”按钮转到下一行。

它适用于中小尺寸的屏幕，但在较大的屏幕（>〜1900）上，两个项目均恢复为均匀大小，因此每个占50％。视觉上，这些按钮向左移动，因此它们位于屏幕中间，而不是右侧。

我想念什么？

https://codepen.io/Quantumcat/pen/JgGdNB

<div class="md-layout md-gutter md-alignment-center-center">
        <div class="md-layout-item md-large-size-80 md-medium-size-70 md-small-size-100">
          <fieldset class="curved-field">
            <legend class="medium-field-heading">Filtering</legend>
            <div class="md-layout md-gutter">
              <div class="md-layout-item md-medium-size-28 md-small-size-33 md-xsmall-size-100">
                <md-field>
                  <label>First Name</label>
                  <md-input v-model="firstName"></md-input>
                </md-field>
              </div>
              <div class="md-layout-item md-medium-size-28 md-small-size-33 md-xsmall-size-100">
                <md-field>
                  <label>Last Name</label>
                  <md-input v-model="lastName"></md-input>
                </md-field>
              </div>
              <div class="md-layout-item md-medium-size-28 md-small-size-33 md-xsmall-size-100">
                <md-field>
                  <md-select placeholder="Agency">
                  </md-select>
                </md-field>
              </div>
              <div class="md-layout-item md-medium-size-9 md-small-size-100 md-xsmall-size-100">
                <md-button class="md-raised" v-on:click="resetFilters">Reset</md-button>
              </div>
            </div>
          </fieldset>
        </div>
        <div class="md-layout-item md-large-size-20 md-medium-size-30 md-small-size-100">
          <md-button class="md-raised" v-on:click="addContact">Add Contact</md-button>
          <md-button class="md-raised" v-on:click="download">Download</md-button>
        </div>
      </div>

预期：过滤框占据了大部分行，并且两个按钮在右侧。

实际：过滤框和按钮分别占行的50％。