Next.js Discord

Discord Forum

height not working what?

Answered
French Lop posted this in #help-forum
Open in Discord
French LopOP
Heres my code, the div isn't stretching as in image

import HeroHome from "@/components/subpages/hero";

export default function Home() {
  return (
    <div className="flex flex-col justify-center items-center h-full">
      <div className="flex flex-row justify-center items-center bg-base w-full min-h-screen">
        <div className="flex justify-center items-center flex-col bg-white w-1/2 h-full">
          Hello
        </div>
      </div>
    </div>
  );
}
Answered by Ray
   <div className="flex flex-col justify-center items-center h-full">
      <div className="flex flex-row justify-center items-center bg-base w-full min-h-screen">
        <div className="flex justify-center items-center flex-col bg-red-500 w-1/2 self-stretch">
          Hello
        </div>
        <div className="flex justify-center items-center flex-col bg-white w-1/2 self-stretch">
          Hello
        </div>
      </div>
    </div>
View full answer

28 Replies

i tried with just one

import HeroHome from "@/components/subpages/hero";

export default function Home() {
  return (
    <div className="flex flex-col justify-center items-center h-full">
      <div className="flex flex-row justify-center items-center bg-base w-full min-h-screen">
        <div className="flex justify-center items-center flex-col bg-white w-1/2 h-full flex-grow">
          Hello
        </div>
      </div>
    </div>
  );
}
French LopOP
that did it
bUT
now i cant put the child divs in row
Ray
so you want a row with full height?
French LopOP
YES
sorry
my caps lock is broken
@French Lop my caps lock is broken
Ray
 <div className="flex flex-col justify-center items-center h-full">
      <div className="flex flex-row justify-center items-center bg-base w-full min-h-screen">
        <div className="flex justify-center items-center flex-col bg-white w-1/2 self-stretch">
          Hello
        </div>
      </div>
    </div>
French LopOP
import HeroHome from "@/components/subpages/hero";

export default function Home() {
  return (
    <div className="flex flex-col justify-center items-center h-full">
       <div className="flex flex-col justify-center items-center h-full">
        <div className="flex flex-row justify-center items-center bg-base w-full min-h-screen">
          <div className="flex justify-center items-center flex-col bg-white w-1/2 self-stretch">
            Hello
          </div>
        </div>
      </div>
    </div>
  );
}
This shouldn't be happening
it should be workign properly
never encountered this b4
Ray
wdym?
like this is the first time ive seen an issue like this
Ray
   <div className="flex flex-col justify-center items-center h-full">
      <div className="flex flex-row justify-center items-center bg-base w-full min-h-screen">
        <div className="flex justify-center items-center flex-col bg-red-500 w-1/2 self-stretch">
          Hello
        </div>
        <div className="flex justify-center items-center flex-col bg-white w-1/2 self-stretch">
          Hello
        </div>
      </div>
    </div>
Answer
French LopOP
Oh yeah
it does
wait whats the difference
Ray
you have one more div
French LopOP
Oh
thank you