I'm new to React, and I'm currently building a slideshow on my website. Basically, I have a left arrow, the slide content, then the right arrow in my flexbox for my slideshow. However, to make my arrows on the edges of the screen I needed to use position absolute, which messes up my flexbox container. I figured out that absolutely positioned child items don't count in the flexbox of the parent, but is there a way around that? As of now, my image is overlapping with the left arrow. Thanks, and sorry if this is poorly written since I'm very new to this all. Code will be below. Image: [1]: https://i.stack.imgur.com/PkL3Z.jpg

import { ArrowBackIosOutlined, ArrowForwardIosOutlined } from '@material-ui/icons'
import React from 'react'
import styled from 'styled-components'
import grocery from '../assets/grocery.png'

const Container = styled.div`
    width: 100%;
    height: 100vh;
    display: flex;
    position: relative;
`

const Arrow = styled.div`
    width: 50px;
    height: 50px;
    background-color: #fff7f7;
    border-radius: 50%; 
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    bottom: 0;
    left: ${props => props.direction === "left" && "10px"};
    right: ${props => props.direction === "right" && "10px"};
    margin: auto;
    cursor: pointer;
    opacity: 0.5;
`

const Wrapper = styled.div`
    height: 100%;
`

const Slide = styled.div`
    width; 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
`

const ImageContainer = styled.div`
    height: 100%;
    flex: 1;
    margin-top: 50px;
`

const Image = styled.img`
    height: 50%;
`

const InfoContainer = styled.div`
    flex: 1;
`

const Slider = () => {
  return (
    <Container>
        <Arrow direction="left">
            <ArrowBackIosOutlined/>
        </Arrow>
        <Wrapper>
            <Slide>
               <ImageContainer>
                    <Image src={https://images.unsplash.com/photo-1481349518771-20055b2a7b24?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8M3x8cmFuZG9tfGVufDB8fDB8fA%3D%3D&w=1000&q=80}/>
                </ImageContainer> 
            </Slide>
        </Wrapper>
        <Arrow direction="right">
            <ArrowForwardIosOutlined/>
        </Arrow>     
    </Container>
  )
}

export default Slider