Make allotment panels without scrollbar

Question

I would like to make a draggable split panel by https://github.com/johnwalley/allotment .

https://stackblitz.com/edit/react-ts-qrb8jw?file=App.tsx,style.css,index.tsx

I notice that because of the CSS style: .container { height: 100vh; overflow: scroll; } .container { height: 100vh; overflow: scroll; } .container { height: 100vh; overflow: scroll; } , there is a scrollbar on the right of the output.

But if we delete className="container" , the allotment will not render.

export default function App() {
  return (
    <div className="container">
      <Allotment vertical>
        <Allotment.Pane>Main Area</Allotment.Pane>
        <Allotment.Pane>abc</Allotment.Pane>
      </Allotment>
    </div>
  );
}

Does anyone know how to render an allotment that occupies 100% of the height of the screen and does not cause a scrollbar on the right?

Answer 1

Perhaps try reset the default margins to prevent unnecessary spacing, and also specify overflow property not to show scorllbars by default in CSS.

Forked example with modification: stackblitz

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

.container {
  height: 100vh;
  /* 👇 Can also be "overflow: auto" if prefer to show scrollbars when content overflows */
  overflow: hidden;
}