I am applying flex property but it doesnt expand nor shrink

Question

   
    #container {
      height:800px;
      display:flex;
      
      text-align:center;
      background-color:grey;
      justify-content:flex-start;
      align-content:flex-start;
    }


    #container > div{

    }

    #box-1 {
      background-color:green;
      height:100px;
      
      width:25%;
     

    }
    #box-2 {
      background-color:yellow;
      height:100px;
      
      width:25%;
    }
    #box-3 {
      background-color:pink;
        height:100px;
     
      
      width:50%;
    }

    #box-4 {
      background-color:aqua;
      height:100px;
     
      width:50%;}

    #box-5 {
      background-color:blue;
      height:100px;
     
    width:50%;}

    #box-6 {
      height:100px;
      background-color:chocolate;
      flex:3 3 200px;
    width:25%;}

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

As you can see I am trying to add flex property to box-6 , but it doesn't do anything. Could someone explain me why doesnt it do anything? Thanks in advance. I would like to see this box-6 shrink 3x times faster and grow 3x times faster? I dont think that i've added anything in particular that breaks it maybe? So would like to get some help.

Answer 1

I don't know why you use percent, but I think just adding and set flex property to all of your elements can fix it.

#container {
      height:800px;
      display:flex;
      text-align:center;
      background-color:grey;
      justify-content:flex-start;
      align-content:flex-start;
    }


    #container > div{

    }

    #box-1 {
      background-color:green;
      height:100px;
      
      flex:1 1;
     

    }
    #box-2 {
      background-color:yellow;
      height:100px;
      
      flex:1 1;
    }
    #box-3 {
      background-color:pink;
        height:100px;
     
      
      flex:2 2;
    }

    #box-4 {
      background-color:aqua;
      height:100px;
     
      flex:2 2;}

    #box-5 {
      background-color:blue;
      height:100px;
     
    flex:2 2;}

    #box-6 {
      height:100px;
      background-color:chocolate;
      flex:3 3 200px}

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