How to make DIV element responsive to screen resolution

Question

I'm trying to create element div that contain 3 part, using 2 row and 2 column.

 .flex-row { flex-direction: row; display: flex; width: 310px; } .flex-column { flex-direction: column; display: flex; } .flex-body { display: flex; margin: 40px 10px 0px 0px; } .flex-body div:not([class*="flex"]) { border: 1px solid white; flex: 1 1 260px; width: 764px; } 

 <div class="flex-body"> <div class="flex-row"> <div style="background: #0980cc;"></div> </div> <div class="flex-column"> <div style="background: #09cc69;"></div> <div style="background: #cc092f;"></div> </div> </div> 

I set the width because if I didn't do it, the width wouldn't fit page.

But the div isn't responsive. I've tried but nothing work. How can I make my div responsive the screen resolution?

Answer 1

I've just created a version that uses percentages:

body,
html {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
}

.flex-body {
    display: flex;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 40px;
}

.flex-body div:not([class*="flex"]) {
    border: 1px solid white;
    flex: 1 1 50%;
    position: relative;
    box-sizing: border-box;
}

.flex-row {
    flex-direction: row;
    display: flex;
    width: 35%;
    background-color: #0980cc;
}

.flex-column {
    flex-direction: column;
    display: flex;
    width: 65%;
}

.flex-column div:nth-child(1) {
    background: #09cc69;
    width: 100%;
}

.flex-column div:nth-child(2) {
    background: #cc092f;
    width: 100%;
}

jsfiddle link