100% total width for flex items in flex container, with gap inbetween

Question

I am trying to position elements in a flexbox with flex-wrap with gap in between

Ideally the way this should be displayed is:

• On the first row the blue box taking the full width no gaps anywhere
• Second row Red box taking the first 33%, Green box taking the remaining 66%
• There should be 12px gap between the 2 rows
• There should be 12px gap between the Red and Green item without them going on the next row, so their widths should actually become 33% - 6px and 66% - 6px so that there is space left for the gap.

End result should look something like this:

 .container { max-width: 200px; width: 200px; display: flex; flex-wrap: wrap; gap: 12px; padding: 0 12px 0 12px; } .item1 { width:33%; height: 200px; background-color: red; } .item2 { width:66%; height: 200px; background-color: green; } .item3 { width: 100%; height: 200px; background-color: blue; }

 <div class="container"> <div class="item3"></div> <div class="item1"></div> <div class="item2"></div> </div>

Answer 1

I have added a flex-direction: row, Removed the padding and added a calc function to the widths as well as upped the 66% to 67% to create 100% total.

 .container { max-width: 200px; width: 200px; display: flex; flex-direction: row; flex-wrap: wrap; gap: 12px; } .item1 { width: calc(33% - 6px); height: 200px; background-color: red; } .item2 { width:calc(67% - 6px); height: 200px; background-color: green; } .item3 { width: 100%; height: 200px; background-color: blue; }

 <div class="container"> <div class="item3"></div> <div class="item1"></div> <div class="item2"></div> </div>

Answer 2

You can use flex-basis and flex-grow instead of width . See the example below...

 .container { max-width: 200px; width: 200px; display: flex; flex-wrap: wrap; gap: 12px; padding: 0 12px 0 12px; } .item1 { flex-basis: 33%; height: 200px; background-color: red; } .item2 { flex-basis: 60%; /* Reduce this value abit and allow to auto grow */ flex-grow: 1; /* Last item will fill up the remaining space */ height: 200px; background-color: green; } .item3 { flex-basis: 100%; height: 200px; background-color: blue; }

 <div class="container"> <div class="item3"></div> <div class="item1"></div> <div class="item2"></div> </div>

Answer 3

This is @Ben variant but improve calculations

 .container { --gap: 12px; max-width: 200px; width: 200px; display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--gap); // better use like veriable, you can edit it one time in all plays together } .item { height: 200px; // we have pattern, we don't need repeat it } .item1 { width: calc(33.33% - var(--gap) / 2); // improve calculation background-color: red; } .item2 { width: calc(66.66% - var(--gap) / 2);// improve calculation background-color: green; } .item3 { width: 100%; background-color: blue; }

 <div class="container"> <div class="item item3"></div> <div class="item item1"></div> <div class="item item2"></div> </div>

Answer 4

This a CSS grid use case where you don't need a lot of code and headaches:

 .container { max-width: 200px; display: grid; grid-template-columns: 1fr 2fr; grid-auto-rows:200px; gap: 12px; } .item1 { background-color: red; } .item2 { background-color: green; } .item3 { grid-column: 1/-1; background-color: blue; }

 <div class="container"> <div class="item3"></div> <div class="item1"></div> <div class="item2"></div> </div>