<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>wrap-4</title><style>.cell {background: #f55;text-align: center;vertical-align: middle; }.wrap-box {display: -webkit-box;width: 300px; }.col {-webkit-box-flex: 1;display: -webkit-box;} .cell {-webkit-box-flex: 1;} .wrap-4 {-webkit-box-orient: horizontal;} .wrap-4 .col {-webkit-box-flex: 0;-webkit-box-orient: vertical;} .wrap-4 .col:first-child {width: 66.6%;} .wrap-4 .col:last-child {width: 22.2%;} .wrap-4 .cell {padding-top: 100%;} .wrap-4 .col:first-child{margin-right: 1px;} .wrap-4 .col:last-child .cell:first-child, .wrap-4 .col:last-child .cell:nth-child(2) {margin-bottom: 1px; }</style> </head> <body><div class="wrap-box wrap-4"><div class="col"><div class="flex-box1 cell"></div></div><div class="col"><div class="cell"></div><div class="cell"></div><div class="cell"></div></div></div> </body> </html>