Flex properties

Tell us what’s happening:

  **Your code so far**

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

#box-2 {
  background-color: orangered;
  display:flex;
  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/89.0.4389.114 Safari/537.36.

Challenge: Use the flex Shorthand Property

Link to the challenge:

Welcome to the forums.

When asking for help follow 3 simple steps:

  1. What is happening/not happening?
  2. Show us your code.
  3. What is the problem?

You can read about flex in the meantime:

Hi, you got the required result, but the challenge is about shortening all three of flex-grow, flex-shrink, and flex-basis together into one property flex. Read the challenge description to see how you can do that and you will pass the challenge.

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