I'm having a lot of css flexbox issues-CodePudding

I've recently started learning CSS Flexbox. Even though I'm being able to follow the curriculum, I'm having issues with some codes. In the code below, I'm trying to use these two properties I learnt recently, flex-shrink and flex-grow, inside of a flex-container, the first two of the four div boxes are visible but the other two are not visible in the screen layout. Can someone please explain me that why I'm having such issues and what should I do? Thank you. Here's my code-

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title></title>
</head>

<body>
  <style>
    #box-container {
      display: flex;
      height: 300px;
    }
    
    #box-1 {
      background-color: dodgerblue;
      height: 50px;
      flex-grow: 1;
    }
    
    #box-2 {
      background-color: orangered;
      height: 50px;
      flex-grow: 2;
    }
    
    #box-3 {
      background-color: dodgerblue;
      height: 50px;
      flex-shrink: 2;
    }
    
    #box-4 {
      background-color: orangered;
      height: 50px;
      flex-shrink: 1;
    }
  </style>

  <div id="box-container">
    <div id="box-1"></div>
    <div id="box-2"></div>
    <div id="box-3"></div>
    <div id="box-4"></div>
  </div>
</body>

</html>

CodePudding user response：

The default direction with flexboxes is flex-direction: row; I added flex-direction: column; based on the way you're HTML is structured and everything showed up for me.

    #box-container {
      display: flex;
      flex-direction: column; /* change applied */
      height: 300px;
    }
    
    #box-1 {
      background-color: dodgerblue;
      height: 50px;
      flex-grow: 1;
    }
    
    #box-2 {
      background-color: orangered;
      height: 50px;
      flex-grow: 2;
    }
    
    #box-3 {
      background-color: dodgerblue;
      height: 50px;
      flex-shrink: 2;
    }
    
    #box-4 {
      background-color: orangered;
      height: 50px;
      flex-shrink: 1;
    }

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title></title>
</head>

<body>
  <div id="box-container">
    <div id="box-1"></div>
    <div id="box-2"></div>
    <div id="box-3"></div>
    <div id="box-4"></div>
  </div>
</body>

</html>

CodePudding user response：

None of the boxes has any content. The first two boxes can expand because of flex-grow and the next two shrink by default even if you don't specify flex-shrink. This is why only the first two boxes are visible.

If you want to let them take equal widths with no content you can use flex: 1 1 auto;

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title></title>
</head>

<body>
  <style>
    #box-container {
      display: flex;
      height: 300px;
    }
    
    #box-container > * {
      flex: 1 1 auto;
      height: 50px;
    }
    
    #box-1 {
      background-color: dodgerblue;
    }
    
    #box-2 {
      background-color: orangered;
    }
    
    #box-3 {
      background-color: dodgerblue;
    }
    
    #box-4 {
      background-color: orangered;
    }
  </style>

  <div id="box-container">
    <div id="box-1"></div>
    <div id="box-2"></div>
    <div id="box-3"></div>
    <div id="box-4"></div>
  </div>
</body>

</html>