CHALLENGE Problem

Tell us what’s happening:
CHALLENGE: CSS Flexbox: Use the flex-grow Property to Expand Items

I think this challenge needs a modification in the code, there is no width property in the boxes.
Your code so far


<style>
#box-container {
  display: flex;
  height: 500px;
}

#box-1 {
  background-color: dodgerblue;
  height: 200px;

}

#box-2 {
  background-color: orangered;
  height: 200px;

}
</style>

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

Challenge: Use the flex-grow Property to Expand Items

Link to the challenge:

The flex-grow CSS property will control the width.

1 Like

It may be worth noting that display:flex seems to prevent child elements from behaving as block elements, so they do not automatically occupy 100% of the width of the container.

1 Like

You have to add flex-grow properties to adjust the width of the #box-1 and #box-2.

1 Like