What properties must be added to make an item visible?

HTML-CSS
1

This exercise asks you to add a flex-grow property to both #box-1 and #box-2. The code from the incomplete exercise is below. My question is why do the #box-1 and #box-2 items only appear once you add the flex-grow properties for each? The height properties are 200px for each, which will more than fit in the flex-container since that has height of 500px.

Does this question make sense?
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>

  **Your browser information:**

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

Challenge: Use the flex-grow Property to Expand Items

Link to the challenge:

2

Is it because no flex-basis has been designated?

3

Before I spoil all of the fun by giving you the answer, try this :slight_smile:

Add a border to #box-1 and #box-2 (make them different colors) and see what happens. Also, remove the flex positioning to see what happens. Does that give you any insight as to why the boxes only appear after using flex-grow.

They will also appear if you use width. That ought to be a big hint.

1 Like
4

Thanks for your help, and I genuinely appreciate that you did it as a challenge haha.
It’s because no width has been designated yet, right? The box elements default to a width of 0.

5

<div>s are block level elements, so by default they will take up all the width available to them. When you remove the flex display then you will see both of the boxes taking up all the width in the preview pane. So you don’t need to specify a width for them by default.

But when you use the flex layout with the default flex direction (row) then the block level elements are crammed into one row and they only take up as much width as needed in the row. If you add text to the boxes you will see that they will widen only as much as needed to contain the text. And if you set the flex-direction to column then you will see that the boxes automatically take up all the width available to them again (without having to use flex-grow or width) because aligning them as a column makes them behave like block level elements again.

So yes, you have to add a width to the boxes in this case, but only because you are using flexbox with a row orientation.

6

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