Why is div width not changing when browser window re-sizes?

Question

I have a div named body-container .

I want to change the width of the div depending on the browser window size. I am using the flexbox model to do it, but the width is not changing according to the size of the browser window.

My CSS :

.body-container
{
    display:flex;
    display:-webkit-flex;
    margin-top:20px;
    margin-left:20px;
    margin-right:20px;
    box-shadow:2px 2px 2px #A8A8A8;
    width:800px;
    height:250px;
}

Is there something I need to do with the margin of the divider or is there any other way to make the divider completely flexibly (width wise).

score 1 · Accepted Answer · answered Nov 04 '15 at 18:02

1

Instead of using width: 800px, which uses a fixed value (pixels), use a relative value, such as percentage. Try this:

.body-container  {
    display:flex;
    display:-webkit-flex;
    margin-top:20px;
    margin-left:20px;
    margin-right:20px;
    box-shadow:2px 2px 2px #A8A8A8;
    width: 75%; /* ADJUSTED */
    height:250px;
}

answered Nov 04 '15 at 18:02

Michael Benjamin

346,931
104
581
701

1

thanks a lot...that worked like charm. I have also changed the margin values to % and it is working now. :) – It Assistors Nov 04 '15 at 18:12
Using percentages for `width`, `margin` and other properties is pretty simple and straightforward. It gets a bit tricky when you use percentages for `height`. Here's what you need to know: http://stackoverflow.com/a/31728799/3597276 – Michael Benjamin Nov 05 '15 at 01:00

score 0 · Answer 2 · answered Nov 11 '15 at 21:20

0

Whenever we need to have a responsive container, it is mandatory to specify width in percentage(%). Also make sure you take care of the elements within that container. Have correct break points and mention the width in percentage accordingly.

answered Nov 11 '15 at 21:20

Prashanth Jagadeesh

30
4

Why is div width not changing when browser window re-sizes?

2 Answers2