The parent class css width property doesn't apply in child class @media queries

I have created two components in react project. In all components I have used @media queries Whenever I change screen sizes it has applied all @media queries styles in Inspect tap.

I have check individual components in mobile view and desktop and tablet view it works fine.

In my project ,I have used dropdown option it contains three value Desktop, Tablet, in Inspect tap.

ISSUE: Whenever change dropdown values the parent class width will be changed while the child component @media queries doesn't apply in viewport.

ParentComponent:

<div className={cx('screen_view')}>
<div
 className={cx({
  desktop_view: screenView === 'Desktop',
  mobile_view: screenView === 'Mobile',
  tablet_view: screenView === 'Tablet',
})}>
<ChildComponent />
</div>

ParentComponent Style:

.screen_view {
 background-color: $color-concrete;
 display: flex;
 align-items: center;
 justify-content: center;
 margin: 94px 72px 94px 72px;
 }

 .desktop_view {
  width: 1024px;
 }

.tablet_view {
 width: 768px;
 }

.mobile_view {
 width: 320px;
 }

In ChildComponent, styles doesn't convert @media queries all styles has collapsed

I think the problem is the ParentComponent class width doesn't apply in viewport. Anyone know this issue kindly share your solution

Thank you...