인프런 커뮤니티 질문&답변

flex 컨테이너 안에 rightSectionWrapper,leftSectionWrapper 에 각각 flex-grow:1을 주어 컨테이너의 남은 여백을 똑같이 가져가고 leftWrapper에는 flex-end, rightWrapper에는 flex-start를 주어 중앙정렬 처럼 보이게 나타내는 것까지는 이해 하였습니다.

그런데 직접 코드를 작성하여 로컬에서 실행해보니 flex-grow가 적용이 되질 않습니다. . 개발자 도구를 확인해보면 분명 적용돼있는데 오른쪽 끝에 덩그러니 여백이 남아있습니다.

깃허브의 코드와 비교해보니 다른게 없어 ch2-1의 코드를 복붙해서 로컬에서 돌려봤더니 똑같이 flex-grow가 적용되지 않았습니다.

어떤 문제가 있어서 그런 것일까요 .. ? 코드는 문제가 없어 보이긴하는데 ..

import { ReactNode } from "react";
import style from "@/app/(afterLogin)/layout.module.css";
import Link from "next/link";
import Image from "next/image";
import ZLogo from "../../../public/zlogo.png";

export default function AfterLoginLayout({
  children,
}: {
  children: ReactNode;
}) {
  return (
    <div className={style.container}>
      <header className={style.leftSectionWrapper}>
        <section className={style.leftSection}></section>
      </header>
      <div className={style.rightSectionWrapper}>
        <div className={style.rightSectionInner}>
          <main className={style.main}>{children}</main>
          <section className={style.rightSection}></section>
        </div>
      </div>
    </div>
  );
}

.container {
  display: flex;
  align-items: stretch;
  background-color: #fff;
}

.leftSectionWrapper {
  display: flex;
  align-items: flex-end;
  flex-direction: column;
  flex-grow: 1;
}
.leftSection {
  background-color: orange;
  height: 100dvh;
  width: 275px;
  padding: 0 8px;
}

.rightSectionWrapper {
  display: flex;
  align-items: flex-start;
  height: 100dvh;
  flex-direction: column;
  flex-grow: 1;
}

.rightSectionInner {
  display: flex;
  flex-direction: row;
  background-color: aqua;
  width: 990px;
  height: 100%;
}

.rightSection {
  background-color: aquamarine;
  height: 100%;
}