css Question posted in
Some basic documentation can be found here.

CSS Flex Containers – flex child items don't stay within the Flex container and hide the rest of the DIV contents

Trying to use CSS flex containers to build a responsive page header. When I resize the page for mobile, the flex container items ignore the flex container and overlay over the rest of the div page tags. I can no longer see the navigation bar.

At the top of the page, I have a contact us link and a My Account link. Directly under this, I have put a Flex Container.

Inside the Flex Container, I have 3 child elements that I would like to display horizontally in a row.

.flex-container {

    display: flex;
    
    justify-content: flex-end; 
    align-items: flex-end; 
    /* flex-flow: row wrap; */ 
    flex-direction: row; 
    flex-wrap: wrap; 
    align-content: center;
    /* flex-flow: row wrap; */

    background-color: #bbdefb;
    height: 100%;
    padding: 15px;
    gap: 5px;

  }

  .flex-container > div{
    background: #ffecb3;
    border: 3px solid #ffcc80;
    border-radius: 5px;
    padding: 8px;
  }


  .itemA { 
    /* flex:1 1 auto; */
    flex-grow:2;
    flex-shrink:1;
  }
            
  .itemB { 
    /* flex:1 1 auto; */
    flex-grow:2;
    flex-shrink:1;
  }
            
  .itemC { 
    /* flex:1 1 auto; */
    flex-grow:1;
  }

I end up with the following:
(https://phpout.com/wp-content/uploads/2024/02/hCcrK.png)](https://phpout.com/wp-content/uploads/2024/02/hCcrK.png)

Tags:

2

Answers


  1. 0

    Firstly, Provide the html content for it and I will try to align the css with your html content to check if it works or not.

    It’s working perfectly fine. Please let me know if you have any problem.

    At first try removing the height 100% and check if it works.

    Use this html contents:

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Flexbox Example</title>
</head>
<body>

  <div class="flex-container">
    <div class="itemA">Item A</div>
    <div class="itemB">Item B</div>
    <div class="itemC">Item C</div>
  </div>

</body>
</html>

    style.css:

    Modified css file :

      .flex-container {
    display: flex;
    justify-content: space-between; /* Adjusted justify-content */
    align-items: center; /* Adjusted align-items */
    background-color: #bbdefb;
    padding: 15px;
    gap: 5px;
}

.flex-container > div {
    background: #ffecb3;
    border: 3px solid #ffcc80;
    border-radius: 5px;
    padding: 8px;
}

.itemA, .itemB, .itemC {
    flex: 1; /* Adjusted flex values */
}
    Login or Signup to reply.
  2. 0

    1. Use media queries to adjust the styles for smaller screens. For example, you might want to change the flex-direction to a column on smaller screens to stack the elements vertically.

    2. Remove the height: 100% on the .flex-container as it might cause issues with responsiveness.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search