1

In my project I have react-static repository linked (with yarn link) with react repo.

"react": "^16.13.1"
"react-static": "^6.0.18"

From react-static repository I am importing multiple components which are used in react repo. I want to be able to use vw/vh units in react-static, so that they will display in react project in the way I described below.

The problem is how to make the div to be 100% width and 100% height of viewport for the children. I need to make things work this way:

<div className="wrapper">
<div className="inner"></div>
</div>

The inner div (imported from react-static) needs to have width: 100vw; height: 100vh;. For example - if I set the wrapper size (react container) for width: 400px; height: 200px; (with window size 1920x1080) I want the inner container's viewport to change the way it will match wrapper size - so it will have width: 400px; height: 400px; but will behave like the wrapper is the whole window for it.

The only solution I found so far is to calculate size for the elements in the inner container. Any suggestions?

jasiek-k
  • 11
  • 2
  • so you want to get the max value? – Temani Afif Feb 01 '21 at 14:51
  • If there are other children inside the wrapper, try arranging them with flex. There are a lot of tutorials for flexbox. Otherwise, if you just want the child to take partial space of the parent, you can play around with margins with percentage values. – Gergő Horváth Feb 04 '21 at 19:39

1 Answers1

0

You should be able to set the child to a percent height and it will give you a percentage of its parent div. There are some weird things about height as a percentage - for instance the parent div needs to have explicitly declared height (a percentage of height:auto will always be 0). Read the second answer on this post, it will explain it better than I can.

danielms
  • 26
  • 4