图像未覆盖弹性物品的整个区域

Question

我有以下内容。哪把盒子放在中间。

:host {
  .auth-container {
    display: flex;
    flex-direction: row;
    height: 82vh;
    width: 100%;
  }

  .left-container {
    /* This will be twice as */
    /* big as the small item. */
    flex: 2 0 0;

    .background-container {
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      background-image: url("../../../../assets/background/signin.jpg");

    }
  }

  .right-container {
    flex: 1 0 0;
    align-items: center;
    justify-content: center;
    align-content: center;
  }

  .auth-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    width: 100%;
  }
}

两件事没有发生

1. 我想在左容器中有一个背景图像，但是该图像不能覆盖整个左容器，其外观如下图所示。
2. 登录框未居中。添加align-items后：将其居中而不是在正确的容器上。