What could be the reason for my flex items not shrinking when the browser window size is decreased?

Here is the CSS code for the header component using flexbox:

.header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 15px 20px;
    background-color: #ffffff;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0px 5px 8px -9px rgba(0, 0, 0, 0.75);
}

.header__left {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
}

...

The Header component utilizes Material UI icons and components, with multiple classes and flexbox settings to style them accordingly.

// Import all necessary libraries and icons

const Header = (props) => {
    return (
        <div className='header'>

            <div className='header__left'>
                
                // Logo Component Here

                <div className='header__input'>
                    <SearchIcon />
                    <input type='text' />
                </div>

            </div>

            <div className='header__center'>

                <div className='header__option'>
                    <HomeIcon />
                </div>

                // Add More Options Here...

            </div>

            <div className='header__right'>

                <div className='header__info'>
                    <Avatar />
                    <h4>Akhil</h4>
                </div>

                // Add IconButton Components Here...

            </div>

        </div>
    )
};

export { Header };

The Header component's styling uses CSS Flexbox which may not adjust properly when the screen size is reduced. How can responsive behavior be achieved using flexbox?

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Why doesn't the background color display properly when the div height is set to auto?

When I set the height of #container to auto, the background-color does not display. However, when I set it to a fixed height like 1000px, it shows up. I've attempted using "overflow:auto", but that did not solve the issue. How can I fix this? I want # ...

Implementing a button on a polygon shape within an SVG

I have an SVG at the bottom and I would like to place a button on the bottom line that is also responsive. How can I achieve this using CSS? What I am trying to accomplish: Example Image Is it possible with just CSS and how should I go about implementin ...

Upon calling set() on Map, the object returned does not conform to a Map data structure

I've been exploring the transition to using immutable.js for managing states: class Register extends Component<{}, Map<string, string>> { state = Map<string, string>(); onInputValueChange(e) { const { name, value } ...

The measure of the leaflet map's vertical dimension in a Shiny module application

I'm facing an issue while trying to incorporate my small app as a module within my larger app. Everything seems to be working fine except for the height of the leaflet map. In the standalone app, I had: ui <- fluidPage( tags$style(type = "te ...

Having trouble with Isotope masonry functionality

While experimenting with Isotope from , I tested the reLayout method using the provided example found at . I copied the css and js to my page () but encountered an issue where clicking on the first element caused all other elements to move to the first col ...

Step-by-step tutorial on designing an input slider to dynamically adjust the CSS :before linear-gradient values

Is there a way to achieve a gradient effect using pseudo-element :before on an image that can be customized by adjusting a slider input? I've been trying to implement this feature with the following code, but have not been successful so far. var ...

The background size does not adjust to the size of the viewport

I am encountering an issue with the background size on my webpage. When changing the viewport size on this page , the background does not adjust to the new viewport dimensions immediately. It seems to retain the previous dimension and only updates to the c ...

Is there a way to retrieve a file from Google Drive and showcase it on a webpage using the Google Drive API in NextJS?

Despite my efforts in exploring the documentation and watching various videos, I am still struggling with understanding what to do. As a beginner in Next.js and React, I am currently working on a project that involves fetching a document from Google Driv ...

Is there a way to ensure that a child mimics the behavior of its parent when adjusting the opacity and visibility properties of both elements?

Apologies for the ambiguous title, as I am struggling to accurately convey the issue I am encountering. To clarify the problem, I have created a jsFiddle. In my current layout, all four divs have opacity: 1 and visibility: visible, while divs a and b both ...

Responsive Div that Resizes Proportionally within Parent Container

Having a div element that adjusts its height based on width to maintain aspect ratio, I aim to place this div within another while maximizing available space vertically and horizontally without any cropping. It seems that object-fit: contain, typically use ...

Closing the Material UI Dialog in a child component causes the parent's Dialog to automatically open

I'm facing an issue with my Dialog setup. I have a parent Dialog and a child Dialog in my app. When I click on the child button to open the Child Dialog, it works fine. However, after closing the Child Dialog, the Parent Dialog pops up unexpectedly. I ...

What steps can be taken to avoid generating a fresh instance of a component when rearranging them?

On the desktop version, the component is structured like this: <div className="parent-comp"> <div id="child-1" /> <div id="child-2" /> </div> However, on the mobile version, it switches to: ...

What is the best way to update a specific section of my website by modifying the URL while keeping the menus fixed and the site functioning smoothly?

I am in desperate need of assistance as I search for a solution. Currently, I am working on a project involving music within a web browser or application. My goal is to utilize HTML, PHP, JS, and CSS to create this project. If I start with a website, I p ...

React Router's nested route causes a full page reload when navigating

I have been working on setting up nested routing in React Router and here is my code: import React from 'react'; import DefaultSwitch from './components/DefaultSwitch/DefaultSwitch'; import './scss/App.scss'; const App = () ...

React throwing an error when attempting to include a Link component from react-router-dom

Currently working on a React app and encountering an issue while trying to add the Link component from the react-router-dom package. The main routes are defined in the App.js file structured as follows: https://i.stack.imgur.com/BF8M8.png The <Header ...

Proper Alignment of Multiple Elements Floating to the Right in a Menu

Although this question has been asked previously, I am facing challenges in getting it to work for my specific scenario. My objective is to showcase a menu bar with a search option and inline text to its left. However, when I attempt to float both elements ...

Managing a prolonged press event in a React web application

Hello everyone! I am currently using React along with the Material UI library. I have a requirement to handle click events and long-press events separately. I suspect that the issue might be related to asynchronous state setting, but as of now, I am unsu ...

Combining numerous objects into one object within an array, each with distinct keys, and displaying them using FlatList

I'm struggling to present this information in a FlatList. Array [ Object { "-N1gqvHXUi2LLGdtIumv": Object { "Message": "Aeaaeaea", "Message_CreatedAt": 1652167522975, "Message_by_Ema ...

What advantages does incorporating Redux offer in comparison to relying on a set of global JSON objects for storing data?

Having spent several years working with and tutoring redux, I've been pondering a question about this state management tool. What is the advantage of using redux instead of simply storing global state in JSON objects? One could easily make API calls ...

I am looking to incorporate a search bar into the navigation toolbar on my website

Currently, I am in the process of working on a project and utilizing material-ui@next version 1.x. Can anyone advise me on which dependencies are necessary for installation? ...