根据屏幕宽度和到中心的偏移量在左侧填充屏幕宽度上的 div

Question

I have a parent div with two children inside and I want the first child to go to the left side and the second child should go to the right side. My main problem is they can't start from the exact middle point. They have to start like -100px and +100px from the middle. They should then from that point fill the remaining width of the left or right side of the screen and if the window is resized it should still stick to the exact same position in the middle minus the X Amount of Pixels.

This is what my code looks like so far:

<div className={classes.backPartDivs}>
  <div />
  <div />
</div>

  backPartDivs: {
    width: '100%',
    position: 'absolute',
    top: 0,
    zIndex: 4,
    left: 0,
    height: 68,
    '& > div': {
      '&:first-child': {
        position: 'absolute',
        left: 'calc(-50vw + 50%)',
        height: 68,
        width: '100%',
        backgroundColor: 'red',
        boxShadow: theme.shadows[18],
      },
    },
  },

Answer 1

i wrote it in css u can implement it in your app if this is the result you want

 .parentDiv{ width: 100%; height: 68px; background:red; display:flex; padding:0 100px; }.parentDiv div{ width:100%; height:68px; margin:0 10px; background:yellow; }

 <div class="parentDiv"> <div></div> <div></div> </div>

Answer 2

You can use flex to make gaps between nested div's and add margin-left: 100px .

An example:

 .container { display: flex; outline: 1px solid blue; }.container > div:first-of-type { width: calc(50% - 50px); background-color: orange; } /* ----- Flexbox gap: ----- */.container > * + * { margin-left: 100px; width: calc(50% - 50px); background-color: chocolate; }

 <div class="container"> <div> left </div> <div> right </div> </div>