I am currently working on a reactjs application that includes a header and another component. Initially, everything looks fine, but when I apply display: flex to their div, it seems to reduce the width of the header. Here are some images showing the issue:
Does anyone have any suggestions on how to fix this problem? Here is how the code is structured:
function App() {
return (
<div className="App">
<div className="wrapper">
<main>
<Header />
</main>
<Player />
</div>
</div>
);
}
export default App;
Here is the CSS code:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root{
--red: #990606;
--black: #222224;
--white: #f0f0f0;
}
@media (max-width: 1080px){
html{
font-size: 93.75%;
}
}
@media (max-width: 720px){
html{
font-size: 87.5%;
}
}
body{
background-color: var(--white);
}
body, input, textarea, button{
font: 500 1rem sans-serif;
}
h1{
font-size: 2rem;
font-family: 'VT323', monospace;
font-weight: 500;
}
h2{
font-size: 1.5rem;
}
button{
cursor: pointer;
}
.wrapper{
display: flex;
}
.wrapper.main{
flex: 1;
}
Header JSX:
export function Header() {
return(
<header className="headerContainer">
</header>
)
}
Header CSS:
.headerContainer{
background: var(--black);
height: 6.5rem;
display: flex;
flex-direction: row;
align-items: center;
padding: 2rem 4rem;
border-bottom: 1px solid var(grey);
}
And now for the player component:
export function Player() {
return(
<div className="playerContainer">
</div>
)
}
Player CSS:
.playerContainer{
padding: 3rem 4rem;
width: 26.5rem;
height: 100vh;
background: var(--red);
color: var(--white);
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
}