Make allotment panels without scrollbar-CodePudding

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; }, 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?

CodePudding user response：

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;
  /*