Angular 应用程序中的 Flexbox 布局问题

Question

我正在尝试使用 Flexbox 创建一个布局，其中包含以下元素：

    <application>
    <flex-container>
    <page-content>
    <template-content>
    </template-content>
    </page-content>
    </flex-container>
    </application>

基本上，这是我想要的结构。

为了在我的 app.component.ts 中重现这一点，我创建了这个布局：

        <div class="application-body">
      <header></header>
      <div class="flex-container">
        <img class="background" src="assets/background.png" />
        <ion-app>
          <ion-router-outlet
            (ionNavWillChange)="playFadeInOutAnimation($event.target)"
          ></ion-router-outlet>
        </ion-app>
        <ng-toast></ng-toast>
      </div>
      <footer></footer>
    </div>

app.component.css：

    .background {
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-size: cover;
      background-position: center;
      background-size: 0%;
      position: fixed;
      width: 100%;
      height: 100%;
      z-index: -1;
    }
    
    .application-body {
      margin: 0;
      padding: 0;
      height: 100%;
    }
    
    header {
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      height: 64px;
      background: linear-gradient(to right, #e03434, #dc6869);
      color: #fff;
      padding: 20px;
      width: 100%;
    }
    
    footer {
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      height: 64px;
      background: linear-gradient(to right, #e03434, #dc6869);
      color: #fff;
      padding: 20px;
      width: 100%;
    }
    
    ion-title {
      color: var(--ion-color-text);
      font-size: 1.5rem;
      font-weight: bold;
    }
    
    @media only screen and (min-width: 768px) {
      ion-title {
        font-size: 2rem;
      }
    }

登录页面.component.html：

    <div class="page-content">
      <imcl-scheduling-login-template
      (clickLogin)="autenticationProcess($event)"
      (clickSignup)="navigateToSignupPage($event)"
      ></imcl-scheduling-login-template>
    </div>

登录模板.component.html：

    <div class="template-container">
        <div class="left-content">
          <ion-img class="logo" src="assets/imcl-logo.svg"></ion-img>
        </div>
        <div class="right-content">
          <div class="title-container">
            <ion-text color="primary">
              <h2 class="title">Acesse agora!</h2>
            </ion-text>
          </div>
    
          <form [formGroup]="form" (keyup.enter)="submit()">
            <ion-item>
              <ion-input
                formControlName="username"
                label="Email"
                labelPlacement="floating"
                type="text"
                placeholder="[email protected]"
              >
              </ion-input>
            </ion-item>
            <ion-item>
              <ion-input
                formControlName="password"
                label="Senha"
                labelPlacement="floating"
                type="{{ showPassword ? 'text' : 'password' }}"
                placeholder="*******"
              >
              </ion-input>
              <ion-icon
                name="{{ showPassword ? 'eye-off' : 'eye' }}"
                slot="end"
                (click)="togglePassword()"
              >
              </ion-icon>
            </ion-item>
            <br />
            <br />
            <div class="button-container">
              <ion-button color="primary" (click)="loginHandler()"
                >Acessar agora</ion-button
              >
              <ion-button color="secondary" (click)="signupHandler()"
                >Criar conta</ion-button
              >
            </div>
          </form>
        </div>
    </div>

最后是全局样式（styles.css）：

    .flex-container {
      display: flex;
      flex-direction: column;
      min-height: calc(100vh - 64px);
      background-color: white;
      border: solid 8px blue;
      align-items: center;
    }
    
    .page-content {
      flex: 1;
      overflow-y: auto;
      border: solid 4px purple;
    }
    
    .page-content.no-overflow {
      overflow-y: hidden;
    }
    
    .template-container {
      display: flex;
      flex-direction: row;
      max-height: 100%; /* Define a largura máxima do template */
      min-height: calc(100% + 64px); /* Define a largura máxima do template */
      justify-content: center; /* Centraliza o conteúdo horizontalmente */
      align-items: center; /* Centraliza o conteúdo verticalmente */
    }
    
    .left-content,
    .right-content {
      display: flex;
      max-height: 100%;
      border: solid 4px red;
      flex-direction: column;
      width: 50%;
    }
    
    .title {
      font-size: 32px;
    }
    
    .title-container {
      display: flex;
      justify-content: center;
    }
    
    @media only screen and (max-width: 767px) {
      .page-content {
        align-items: center;
      }
      .template-container {
        flex-direction: column;
        padding: 32px;
        margin: 0;
      }
    
      .left-content,
      .right-content {
        width: 100%;
      }
    }
    
    .left-content,
    .right-content {
      display: flex;
      max-height: 100%;
      border: solid 4px red;
      flex-direction: column;
      width: 50%;
    }
    
    .left-content {
      align-items: flex-end;
    }
    
    .right-content {
      align-items: flex-start;
    }
    
    .button-container {
      display: flex;
      justify-content: center;
    }
    
    .bottom-button {
      position: absolute;
      bottom: 0;
      width: 100%;
      padding: 16px 0;
    }

问题是页面内容的增长速度超过了弹性容器的增长速度，导致了一些可视化问题。页面内容从标题后面开始。

任何人都可以帮忙吗？我对 css 真的很不好。

Answer 1

.flex-container {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 64px); /* Maintain minimum height for viewport coverage */
  background-color: white;
  /* Remove unnecessary min-height from template-container */
  align-items: center;
}

.page-content {
  flex: 1;
  /* Optional: Set overflow-y for scrolling */
  overflow-y: auto;
  /* Or keep overflow-y: hidden; to hide content exceeding container */
  /* Adjust padding/margin as needed */
}

.template-container {
  display: flex;
  flex-direction: row;
  /* Removed min-height: calc(100% + 64px); */
  justify-content: center;
  align-items: center;
}

.left-content,
.right-content {
  display: flex;
  max-height: 100%;
  border: solid 4px red; /* For debugging purposes */
  flex-direction: column;
  width: 50%;
}

/* Other styles remain unchanged... */