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

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

#1

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


#2

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.


#3

Do you mean overflow: hidden?


#4

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


#5

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:


#6

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


#7

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


#8

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.