diff --git a/src/allotment.module.css b/src/allotment.module.css
index 57393bfd..0e7a6b48 100644
--- a/src/allotment.module.css
+++ b/src/allotment.module.css
@@ -4,6 +4,7 @@
 
 .splitView {
   height: 100%;
+  overflow: hidden;
   position: relative;
   width: 100%;
 }
@@ -29,7 +30,6 @@
 .splitView > .splitViewContainer > .splitViewView {
   position: absolute;
   white-space: initial;
-  overflow: hidden;
 }
 
 .splitView > .splitViewContainer > .splitViewView:not(.visible) {
diff --git a/src/allotment.tsx b/src/allotment.tsx
index a214e3f8..f15b9f86 100644
--- a/src/allotment.tsx
+++ b/src/allotment.tsx
@@ -24,6 +24,8 @@ function isPaneProps(props: AllotmentProps | PaneProps): props is PaneProps {
 }
 
 export interface CommonProps {
+  /** Sets a className attribute on the outer component */
+  className?: string;
   /** Maximum size of each element */
   maxSize?: number;
   /** Minimum size of each element */
@@ -38,9 +40,9 @@ export type PaneProps = {
 } & CommonProps;
 
 export const Pane = forwardRef<HTMLDivElement, PaneProps>(
-  ({ children }: PaneProps, ref) => {
+  ({ className, children }: PaneProps, ref) => {
     return (
-      <div ref={ref} className={styles.splitViewView}>
+      <div ref={ref} className={classNames(styles.splitViewView, className)}>
         {children}
       </div>
     );
diff --git a/stories/allotment.stories.module.css b/stories/allotment.stories.module.css
index a26cfe8b..c604129e 100644
--- a/stories/allotment.stories.module.css
+++ b/stories/allotment.stories.module.css
@@ -24,3 +24,22 @@
   resize: both;
   width: 80vw;
 }
+
+.customPane {
+  background-color: red;
+  overflow: scroll;
+}
+
+.customPaneContent {
+  align-items: center;
+  background: rgb(30, 30, 30);
+  color: rgb(255, 255, 255);
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  justify-content: center;
+  width: 200px;
+  background: rgb(222, 222, 222);
+  color: rgb(30, 30, 30);
+  overflow: visible;
+}
diff --git a/stories/allotment.stories.tsx b/stories/allotment.stories.tsx
index 6beeb46b..9e916450 100644
--- a/stories/allotment.stories.tsx
+++ b/stories/allotment.stories.tsx
@@ -272,6 +272,21 @@ ConfigureSash.args = {
   sashSize: 4,
 };
 
+export const PaneClassName: Story = (args) => {
+  return (
+    <div className={styles.container}>
+      <Allotment {...args}>
+        <Allotment.Pane className={styles.customPane}>
+          <div className={styles.customPaneContent}>div1</div>
+        </Allotment.Pane>
+        <Allotment.Pane>
+          <Content />
+        </Allotment.Pane>
+      </Allotment>
+    </div>
+  );
+};
+
 export const Visible: Story<AllotmentProps> = (args) => {
   const [visible, setVisible] = useState(true);