diff --git a/docs/examples/base.tsx b/docs/examples/base.tsx
index 00eabc53..c6966a53 100755
--- a/docs/examples/base.tsx
+++ b/docs/examples/base.tsx
@@ -27,7 +27,8 @@ const Demo = () => {
           console.log('transitionEnd: ', c);
         }}
         placement="right"
-        width={400}
+        // width={400}
+        width="60%"
         // Motion
         {...motionProps}
       >
diff --git a/src/DrawerPanel.tsx b/src/DrawerPanel.tsx
index 5be8c950..db5a3e44 100644
--- a/src/DrawerPanel.tsx
+++ b/src/DrawerPanel.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react';
 import classNames from 'classnames';
-import type { Placement } from './Drawer';
 
 export interface DrawerPanelRef {
   focus: VoidFunction;
@@ -10,40 +9,20 @@ export interface DrawerPanelProps {
   prefixCls: string;
   className?: string;
   style?: React.CSSProperties;
-  width?: number | string;
-  height?: number | string;
-  placement: Placement;
   children?: React.ReactNode;
   containerRef?: React.Ref<HTMLDivElement>;
 }
 
 const DrawerPanel = (props: DrawerPanelProps) => {
-  const {
-    prefixCls,
-    className,
-    style,
-    placement,
-    width,
-    height,
-    children,
-    containerRef,
-  } = props;
+  const { prefixCls, className, style, children, containerRef } = props;
 
   // =============================== Render ===============================
-  const panelStyle: React.CSSProperties = {};
-
-  if (placement === 'left' || placement === 'right') {
-    panelStyle.width = width;
-  } else {
-    panelStyle.height = height;
-  }
 
   return (
     <>
       <div
         className={classNames(`${prefixCls}-content`, className)}
         style={{
-          ...panelStyle,
           ...style,
         }}
         aria-modal="true"
diff --git a/src/DrawerPopup.tsx b/src/DrawerPopup.tsx
index 3fdcb2db..d33d5b6e 100644
--- a/src/DrawerPopup.tsx
+++ b/src/DrawerPopup.tsx
@@ -253,6 +253,7 @@ export default function DrawerPopup(props: DrawerPopupProps) {
         break;
       case 'left':
         wrapperStyle.transform = `translateX(${pushDistance}px)`;
+
         break;
       default:
         wrapperStyle.transform = `translateX(${-pushDistance}px)`;
@@ -260,6 +261,12 @@ export default function DrawerPopup(props: DrawerPopupProps) {
     }
   }
 
+  if (placement === 'left' || placement === 'right') {
+    wrapperStyle.width = width;
+  } else {
+    wrapperStyle.height = height;
+  }
+
   const panelNode: React.ReactNode = (
     <div
       className={classNames(`${prefixCls}-content-wrapper`)}
@@ -293,9 +300,6 @@ export default function DrawerPopup(props: DrawerPopupProps) {
                 ...motionStyle,
                 ...style,
               }}
-              width={width}
-              height={height}
-              placement={placement}
             >
               {children}
             </DrawerPanel>
diff --git a/tests/index.spec.tsx b/tests/index.spec.tsx
index e708af68..b5bde968 100755
--- a/tests/index.spec.tsx
+++ b/tests/index.spec.tsx
@@ -309,4 +309,14 @@ describe('rc-drawer-menu', () => {
       zIndex: 93,
     });
   });
+
+  it('width on the correct element', () => {
+    const { container } = render(
+      <Drawer width="93%" open getContainer={false} />,
+    );
+
+    expect(container.querySelector('.rc-drawer-content-wrapper')).toHaveStyle({
+      width: '93%',
+    });
+  });
 });
diff --git a/tests/index.tsx b/tests/index.tsx
deleted file mode 100644
index 1fc6de2e..00000000
--- a/tests/index.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import * as React from 'react';
-import Drawer from '../src';
-
-export default () => {
-  return (
-    <Drawer
-      prefixCls="abc"
-      wrapperClassName="test"
-      width={100}
-      height="100px"
-      open={false}
-      defaultOpen={false}
-      handler={<div>abc</div>}
-      placement="bottom"
-      level="all"
-      levelMove={() => [100, 100]}
-      duration=".3s"
-      ease=""
-      getContainer="#abc"
-      showMask={false}
-      maskStyle={{ top: 100 }}
-      onChange={e => {
-        console.log(e);
-      }}
-      onClose={(e: React.MouseEvent) => {
-        console.log(e.pageX);
-      }}
-      onHandleClick={(e: React.KeyboardEvent) => {
-        console.log(e.keyCode);
-      }}
-    />
-  );
-};