-1

I'm currently using react, bootstrap and react-bootstrap.

when i render:

//react component
const Title2D = () => {
    return(
        <div>
        <div className="fullvisual">
        </div>
        <div className="fullvisual">
        </div>
        </div>
    )
}
//css
 .fullvisual{
    width: 100vw;
    height: 100vh;
  }

a little bit of horizontal scroll bar gets created. What really confuses me is that changing the width does not affect the horizontal scroll, but it is rather the vh that is causing the scroll bar to appear. When I set the value of height to an absolute value, the scroll bar disappears.

ben lee
  • 9
  • 2
  • Seems similar to this https://stackoverflow.com/questions/44645465/when-using-height-100vh-for-the-container-vertical-scrollbar-appears – Hypermystic Jul 28 '22 at 19:05
  • right. so I tried removing all the margins and possible borders, but no luck :( – ben lee Jul 28 '22 at 19:11
  • try like this https://jsbin.com/fuvafuzuze/7/edit?html,css – Hypermystic Jul 28 '22 at 19:22
  • turns out it could've been something with my dependencies. when I added overflow:hidden to my #root div, which is rendered by react, the bars disappeeard – ben lee Jul 29 '22 at 21:28
  • overflow hidden is clipping the overflowing content of the page that's why the bar got disappeared but I don't think this is the solution for this. – Hypermystic Jul 30 '22 at 04:00

1 Answers1

-1

Use width: 100%; instead of 100vw and make sure all has padding: 0, margin: 0, and box-sizing: border-box;

Lucas
  • 9
  • 1