Css 为什么'；输入焦点与VUE中隐藏的溢出x一起工作？

我的VUE应用程序中有几个表单，它们关注不同的$ref，没有问题

                  <label class="input-fields-label">
                    <input
                    class="input-field"
                    type="radio"
                    value="mr"
                    v-model="ownerFormInfo.civility"
                    @change="formChange($event)"
                    /> Monsieur
                  </label>
                </div>
                <span v-if="msg.civil" class="msg-validator">
                  {{msg.civil}}
                  <i class="icon-info"></i>
                </span>
              </div>
              <div class="form-group fields-group form-lines">
                <div class="input-wrapper">
                  <label class="fields-label">
                    Nom
                    <span class="required-fields-label">*</span>
                  </label>
                  <input
                  ref="ownerNom"                  
                  type="text"
                  class="form-control fields"
                  style="text-transform: capitalize"
                  v-model="ownerFormInfo.lastName"
                  @change="formChange($event)"
                  />
                </div>

在最后一刻，我在我的SCS中包含了一个overflow-x隐藏，这样它就不会显示，因为我包含了它，所以输入的焦点已经停止工作。如果我删除它，焦点将再次工作

html, body {
  width: 100vw;
  height: 100%;
  min-height: 100%;
  overflow-x: hidden;
}

为什么会发生这种情况？ 如何在不阻塞输入焦点的情况下应用溢出

html, body {
  width: 100vw;
  height: 100%;
  min-height: 100%;
  overflow-x: hidden;
}