Can't continue on the next lesson because i'm missing something

HTML-CSS
1 
I can't get past these lessons. I double-check the code to make sure I have no misspelled words or missing a character.  I always get an error saying "Your code should use the flex property for #box-1 and #box-2." which I can see is correct unless I'm missing something.
https://www.freecodecamp.org/learn/responsive-web-design/css-flexbox/use-the-flex-shorthand-property 
<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>
2

Please provide the link to the lesson.

3

Hello,

in the instructions for the challenge, the requirement is to use the flex property.

You are using flex-grow, flex-shrink and flex-basis, but in this challenge you should practice the shorthand flex which allow you to set all 3 values in one line.

In the instructions you have this example:

flex-grow: 1;
flex-shrink: 0;
flex-basis: 10px;

is same as

flex: 1 0 10px;

So just use the flex for styling #box-1 and #box-2 and you will pass the challenge.

3 Likes
4

it worked. Thank you .

5

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.