Learn More About CSS Pseudo Selectors By Building A Balance Sheet - Step 52

[vuongtritung]

Tell us what’s happening:
I am confused about this code, why they have to set width to 100vw and then set min-width and max-width to the same value? Can you explain this code to me? Thank you.

Your code so far

WARNING

The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.

You will need to take an additional step here so the code you wrote presents in an easy to read format.

Please copy/paste all the editor code showing in the challenge from where you just linked.

tbody td{
   width:100vw;
  max-width:4rem;
  min-width:4rem;

}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36

Challenge: Learn More About CSS Pseudo Selectors By Building A Balance Sheet - Step 52

Link to the challenge:

freeCodeCamp.org

[bappyasif]

so that width stays fixed, in that “viewport”, as it mentions in instructions as well

This approach ensures that the width is fixed

happy learning

[vuongtritung]

I set width to 4rem and do not add the max-width and min-width and seems like it works the same, so can you tell me what is the diffrent between my code and their code ? Thank you so much.

[vuongtritung]

And also, I do not understand they said that we are using flexbox? Because the only part I see we use flexbox is in the h1.

[bappyasif]

h1 .flex {
  display: flex;
  flex-direction: column-reverse;
  gap: 1rem;
}

so it’s not just ‘h1’ but also ‘flex’ class that has “flex” in it

@vuongtritung

I set width to 4rem and do not add the max-width and min-width and seems like it works the same

try making your “viewport” smaller, and you should see effect of “min/max-width”

hope this was helpful, if you have anymore question, then feel free to ask away, happy learning

[vuongtritung]

@bappyasif

h1 .flex {
  display: flex;
  flex-direction: column-reverse;
  gap: 1rem;
}

But I thought that the flex class are two words : “AcmeWidgetCorp” and “Balance Sheet” only, why does this relate to this selctor tbody td

[vuongtritung]

@bappyasif

try making your “viewport” smaller, and you should see effect of “min/max-width”

I have tried that, but can you show me what is the diffrence between these two? Bacause even when i set width to 900vw or 40vw, it still looks the same

[bappyasif]

to see this effect, you either have to use “min/max” and not “min & max” properties in same rule, hope this make sense… if not please feel free to reach out

or in this case, just using “width” would have that “different” view on resizing screen, as it mentions in instructions

This approach ensures that the width is fixed, whereas setting width specifically would allow the elements to shrink to the container (because we are using flexbox).

[bappyasif]

it does not directly relate to this “step” what-so-ever, i was simply replying to your query about “flexbox”, there i can see, i said something which is not quite right, it’s only targeting “all h1 with flex as class names as nested in it”, and not two “different ones”

@vuongtritung

And also, I do not understand they said that we are using flexbox? Because the only part I see we use flexbox is in the h1.

[sgcaldas]

I think I get part of it. I’ve added yellow background and black borders to make it easier to visualize.

As you have said, using {width: 4em;} seems to do exactly the same as the proposed solution, as I try to illustrate below:

{width: 100vw; min-width: 4rem; max-width: 4rem;}

{width: 4em;}

But here is the thing: with zoom added, the td elements within the tbody overlap the div.table-wrap to maintain the minimum width of 4rem:

zoomed in {width: 100vw; min-width: 4rem; max-width: 4rem;}

zoomed in {width: 100vw; min-width: 4rem; max-width: 4rem;} inspected

If we had kept {width: 4em;}, the elements within the tbody would have shrunk to fit div.table-wrap, as you can see below:

zoomed in {width: 4em;}

zoomed in {width: 4em;} inspected

But I do not get what it has to do with flexbox. In the image below we can note that not only h1 uses ‘display: flex;’ but also the div with the id set to ‘years’ does use it. However, I don’t see any relation between div#years and div.table-wrap and, since assumed that div.table-wrap is not a flex container, it seems to me the overlapping, in this case, may not be related to flexbox.

div#years {display: flex;}

I would really appreciate if someone could dive into it and explain (1) what div.table-wrap and its contents have to do with flexbox and (2) whether the explanation I tried above to the td tbody shrinking/overlapping makes any sense at all.

My apologies if I confused stuff.