I have a simple flex header with flex items which displays absolute divs kinda like a dropdown. It works fin in a normal HTML file but in react, the flex items overflow with a scroll bar forcing the div no to overlap the header itself. The following is the html code

<style>
  .special {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
  }
  .special > * {
    display: relative;
  }
  .resultDiv {
    display: none;
    position: absolute;
    background-color: purple;
    height: 150px;
    width: 80px;
  }
  .special > *:hover .resultDiv {
    display: block;
  }
</style>

 <header class="special" style="background: red">
            <p>Ameer</p>
            <div>
                <form>
                    <input type="search"/>
                </form>
                <div class="resultDiv"></div>  
            </div>
            <nav>
                <div class="resultDiv"></div>
                <a href="#">Home</a>
                <a href="#">Contact</a>
                <a href="#">About</a>
            </nav> 
        </header>

The stling is thesame for react. Here's the code for react component

function DesktopHeader(){
    return(
         <header className="special"style={{background: 'red'}}>
            <p>Ameer</p>
            <div>
                <form>
                    <input type="search"/>
                </form>
                <div className="resultDiv"></div>  
            </div>
            <nav>
                <div className="resultDiv"></div>
                <a href="#">Home</a>
                <a href="#">Contact</a>
                <a href="#">About</a>
            </nav> 
        </header>
    )
}