CODEWITHSUNDEEP
javascripthtmlcssreactjsflexbox
ABC
ABC

Reputation: 763

React flexbox is overflowing screen size

I'm trying to get a div to render until the bottom of the screen/page (and no further than that).

I'm able to do that successfully as long as this div is the only thing in the entire page. However, it's overflowing the page whenever I have anything above it (in this example, the text Some Header).

https://codesandbox.io/s/keen-bird-phx1f?file=/src/App.js

enter image description here

The React code:

import "./styles.css";

import React, { Fragment } from "react";

export default function App(props) {
  return (
    <Fragment>
      <div>Some Header</div>
      <div className="test1">
        <div className="dashbar">Dash</div>
        <div className="other-content">Other</div>
      </div>
    </Fragment>
  );
}

The CSS code:

* {
  box-sizing: border-box;
}
body {
  margin: 0;
}

.test1 {
  display: flex;
  height: 100vh;
  border: 10px solid green;
}

.dashbar {
  flex: 1 0 10%;
  background: dodgerblue;
}

.other-content {
  flex: 1 0 90%;
  background: papayawhip;
}

How can I make it so that this div will stop at the bottom of the page and not overflow like this?

If I remove <div>Some Header</div>, then it behaves as expected:

enter image description here

Upvotes: 0

Views: 544

Answers (2)

Charan Kumar
Charan Kumar

Reputation: 573

It's because "test1" has height as 100vh and there is a static header text which has some height. Try this to fix:

* {
  box-sizing: border-box;
  line-height: 15px;
}

.test1 {
  display: flex;
  height: calc(100vh - 15px);
  border: 10px solid green;
}

--- Dynamic solution: https://codesandbox.io/s/stupefied-agnesi-x496f?file=/src/App.js

Upvotes: 0

Jeremy Thille
Jeremy Thille

Reputation: 26410

.test1 has a height of 100vh, meaning you are forcing it to be exactly as tall as the viewport. But it has a header above it! So, the header necessarily pushes it down and it overflows the screen. You need a bit more of Flexbox trickery to get it right, especially flex-grow:1.

* {
  box-sizing: border-box;
}
body {
  margin: 0;
}

#root {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.test1 {
  display: flex;
  flex-grow: 1;
  border: 10px solid green;
}

.dashbar {
  flex: 1 0 10%;
  background: dodgerblue;
}

.other-content {
  flex: 1 0 90%;
  background: papayawhip;
}
<body>
  <div id="root">
    <div>
      Some Header<br>
      with a couple<br>
      of lines in it
    </div>
    <div class="test1">
      <div class="dashbar">Dash</div>
      <div class="other-content">Other</div>
    </div>
  </div>
</body>

Upvotes: 2

Related Questions