how to make a child div not to exceed its parent width if child's width is dynamic

Question

In my jsp, I have a div whose width is determined by a javabean value. Basically it is being used to fill a bar. Some times the values are greater than 100, so the width becomes 300% (for example), thus going out of the parent's boundary.

I need to know, how I can limit the child div's width so that it doesn't exceed the parent boundary.

Thank you.

Answer 1

I just used a combination of the previous responses and it worked for me. In my case I din't want to hardcode any pixel values but leave my child element fluid to grow and shrink to its parent element width.

Used for parent overflow: hidden; and for the child width: 100% !important;

Also noticed that the child doesn't have to be the direct child of the parent for this to work. For the record, my parent element is a Flex Container with flex-basis: 66%; which translates to a relative width in the Flexbox concept.

Answer 2

You can use width:100% !important on child div.This means it will fill only the parent div space only.

Alternatively you can also go for max-width and min-width concept.

Answer 3

Apply the following CSS to the parent div:

overflow: hidden;

Or you might want to try the CSS max-width property on the child-div.