Next.js Discord

Discord Forum

height not working what?

Answered
French Lop posted this in #help-forum
Open in Discord
Avatar
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>
  );
}
Image
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

Avatar
Ray
 <div className="flex justify-center items-center flex-col bg-white w-1/2 h-full flex-grow">

try to add flex-grow to the div
Avatar
French LopOP
That just extended the width
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>
  );
}
Image
Avatar
Ray
flex-row to flex-col?
Avatar
French LopOP
that did it
bUT
now i cant put the child divs in row
Image
Avatar
Ray
so you want a row with full height?
Avatar
French LopOP
YES
sorry
my caps lock is broken
Avatar
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>
Avatar
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>
  );
}
Image
This shouldn't be happening
it should be workign properly
never encountered this b4
Avatar
Ray
wdym?
Avatar
French LopOP
They normally work with this code
like this is the first time ive seen an issue like this
Avatar
Ray
this work
Image
Avatar
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
Avatar
French LopOP
Oh yeah
it does
wait whats the difference
Avatar
Ray
you have one more div
Avatar
French LopOP
Oh
thank you