CODEWITHSUNDEEP
javascripthtmlcssreactjs
Leo Messi
Leo Messi

Reputation: 6166

Div in React doesn't get the maximum size

Having a React app with this structure:

index.js

...

ReactDOM.render(
  <Provider
    store=...
  >
    <BrowserRouter>
      <App>
           //other components
      </App>
    </BrowserRouter>
  </Provider>,
  document.getElementById('root')
);

App.js

export default (props) => {
  return (
    <div style={{ backgroundColor: 'red' }}>
     <div
        className='container'
        style={{
          width: '100vw',
          height: '100vh',
          paddingBottom: '32px',
          paddingLeft: '37px',
          paddingRight: '37px',
          paddingTop: '20px',
          backgroundColor: 'green',
        }}
      >
        {props.children}
      </div>
    </div>
  );
};

container class contains:

.container {
  height: 100vh;
  width: 1100vw;
}

My question is: why isn't the green as big as the red one? (plus/minus padding, doesn't matter)

I tried width: 100%, 100wh, auto, etc. No one worked. I want that element to be as big as its parent.

This is how it looks: https://i.sstatic.net/uNz24.jpg

I put a black rectangle over the app's data because it's not important in this case.

Upvotes: 1

Views: 677

Answers (3)

klugjo
klugjo

Reputation: 20885

Your container class is adding a 

max-width: 960px

to your green rectangle

You can either remove the container class or add

maxWidth: '100vw'

to the styles of your green div

Upvotes: 0

Vladimir Bataller
Vladimir Bataller

Reputation: 96

The width units you are using are not right: try with vw or vh instead of wh.

You can check it at MDN - CSS values and units

Note: I have test it, after you fix de units, and the App.js works

Upvotes: 0

Ceyhun Aslan
Ceyhun Aslan

Reputation: 152

The property you are looking for is vw not wh. So changing width: '100wh' to width: '100vw' should solve your problem.

Upvotes: 1

Related Questions