33 replies

Height Issue

I am working on web app, and the dashboard should only cover the full viewport of 100vh and 100vw. Preventing the horizontal and vertical scroll.

HTML structure:

<div className="flex w-full max-h-screen overflow-hidden">
  <Sidebar />
  <div className="w-full bg-bg">
    <Navbar />
    <div className="flex justify-between w-full gap-4 mt-8 mb-6">
        <LeftContent />
        <LabelContent />
    </div>
  </div>
</div>

<div className="flex w-full max-h-screen overflow-hidden">
  <Sidebar />
  <div className="w-full bg-bg">
    <Navbar />
    <div className="flex justify-between w-full gap-4 mt-8 mb-6">
        <LeftContent />
        <LabelContent />
    </div>
  </div>
</div>

LeftContent Structure:

<div className="w-full h-full">
  <SwitchButton />
  <ReadingAnimation reading={reading} />}
  
  <div className="h-full mt-[1.375rem] overflow-auto  bg-card" >
      <pre>{Content Here}</pre>
  </div>

  <button>NEXT</button>
</div>

<div className="w-full h-full">
  <SwitchButton />
  <ReadingAnimation reading={reading} />}
  
  <div className="h-full mt-[1.375rem] overflow-auto  bg-card" >
      <pre>{Content Here}</pre>
  </div>

  <button>NEXT</button>
</div>

In the leftContent component, the div with pre tag, I add "full-height", and div exceeds 100vh height.
I don't want this. I want the div should cover only the available.

I tried flex-grow but that didn't work either. How to solve this?

KP-C

Kevin Powell - Community•3y ago•

33 replies

Mozi47

Height Issue

I am working on web app, and the dashboard should only cover the full viewport of 100vh and 100vw. Preventing the horizontal and vertical scroll.

HTML structure:

<div className="flex w-full max-h-screen overflow-hidden">
  <Sidebar />
  <div className="w-full bg-bg">
    <Navbar />
    <div className="flex justify-between w-full gap-4 mt-8 mb-6">
        <LeftContent />
        <LabelContent />
    </div>
  </div>
</div>

<div className="flex w-full max-h-screen overflow-hidden">
  <Sidebar />
  <div className="w-full bg-bg">
    <Navbar />
    <div className="flex justify-between w-full gap-4 mt-8 mb-6">
        <LeftContent />
        <LabelContent />
    </div>
  </div>
</div>

LeftContent Structure:

<div className="w-full h-full">
  <SwitchButton />
  <ReadingAnimation reading={reading} />}
  
  <div className="h-full mt-[1.375rem] overflow-auto  bg-card" >
      <pre>{Content Here}</pre>
  </div>

  <button>NEXT</button>
</div>

<div className="w-full h-full">
  <SwitchButton />
  <ReadingAnimation reading={reading} />}
  
  <div className="h-full mt-[1.375rem] overflow-auto  bg-card" >
      <pre>{Content Here}</pre>
  </div>

  <button>NEXT</button>
</div>

Height Issue

Similar Threads

Height Issue

Similar Threads

Similar Threads

Similar Threads