Tell me what is wrong with this code?

HTML-CSS
1

Tell us what’s happening:

Your code so far


<style>
#box-container {
  display: flex;
  height: 500px;
}
#box-1 {
  background-color: dodgerblue;
  flex-grow: 2;
  flex-shrink: 2;
  flex-basis: 150px;
  height: 200px;
}

#box-2 {

  background-color: orangered;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 150px;
  height: 200px;
}
</style>

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

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.105 Safari/537.36.

Challenge: Use the flex Shorthand Property

Link to the challenge:

2

@Jla You need to add the flex: property to the box_1 and box_2.
here in the CSS section of your code

#box-1 {
    background-color: dodgerblue;
    

    height: 200px;
  }

the order is like this:
flex: flex-grow flex-shrink flex-basis; .

instead of flex-grow flex-shrink flex-basis to insert proper numbers. As this exercise wants you to add 2 2 150px for box 1 and another value for box 2 . Read the instruction thoroughly and follow it.