Tengo un encabezado flexible simple con elementos flexibles que muestra divs absolutos como un menú desplegable. Funciona bien en un archivo HTML normal, pero al reaccionar, los elementos flexibles se desbordan con una barra de desplazamiento que obliga al div no a superponerse al encabezado. El siguiente es el código html

 <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>

El stling es el mismo para reaccionar. Aquí está el código para el componente de reacción.

 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> ) }