How to get the size of the box to stay fixed?

The size of the box changes according to what elements are in the box, how do I make the box fixed to a certain size so it doesn’t change when the content changes?

gif_forfcc

I am using React, here is the github repository of the project:

The style is inside of the index.css file as you may have expected

Not sure but probably fix the size of the outer box and then use overflow on the inner box if the content will be too big.

Do you mean overflow: hidden?

If I could see a working demo, it would be easier to debug.
Do you know how to debug CSS in the browser?

You mean like using dev tools…

This was made a couple of weeks ago so it’s not updated but it might help you to understand the structure:

Ok, I got it, I was using a ternary operator returning either the first or the second div on hover. I added a class to the two divs, styled them and they now have a fixed height and width. Thank you so much.
gif_forfcc3

1 Like

Well done. :clap: I was going to suggest increasing the min-width of the wineBox class as an option?

It didn’t have to do with that. Decreasing or increasing the size of the wineBox would have only changed the border outside of the box but I think I could have done that using the contain property but i am not sure.
Anyway I think styling the div inside is a better approach.

1 Like