How to fix display flex with percent width columns 1px gap? - html

Question

On specific width display flex columns with percent width leave one 1px gap
http://prntscr.com/gyhatt
html,
body {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
.wrapper {
max-width: 1200px;
padding: 30px;
}
.container {
display: flex;
flex-wrap: wrap;
background: red;
}
.g {
padding: 30px;
}
.grid-33 {
width: 33.3333%;
}
.grid-50 {
width: 50%;
}
.grid-66 {
width: 66.6666%;
}
.grid-100 {
width: 100%;
}
.white {
background: #fff;
}
.yellow {
background: #ffb401;
}
<div class="wrapper">
<div class="container">
<div class="g white grid-66">
<p>Test</p>
</div>
<div class="g yellow grid-33">
<p>Test</p>
</div>
</div>
</div>
fiddle
I have already tried setting the grid-33 at 33.3334% and it does not work plus it is not useful since I am working with a framework and cant "nudge" specific columns to fix an actual layout issue. I was hoping that flex box dimensions would be like display table where px are rounded up but seems like that is not the case.
Any help is appreciated.

Answer 1

That issue is a bug (or rounding issue) that among other Chrome and Edge have, but not Firefox.
https://lists.webkit.org/pipermail/webkit-unassigned/2006-January/002684.html
http://cruft.io/posts/percentage-calculations-in-ie/
https://johnresig.com/blog/sub-pixel-problems-in-css/
I found 2 workarounds, one where you add justify-content: space-between; to the flex container (still it appears that at some screen width's Chrome still has that 1px issue)
Stack snippet
html,
body {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
.wrapper {
max-width: 1200px;
padding: 30px;
}
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
background: red;
}
.g {
padding: 30px;
}
.grid-33 {
width: 33.3333%;
}
.grid-50 {
width: 50%;
}
.grid-66 {
width: 66.6666%;
}
.grid-100 {
width: 100%;
}
.white {
background: #fff;
}
.yellow {
background: #ffb401;
}
<div class="wrapper">
<div class="container">
<div class="g white grid-66">
<p>Test</p>
</div>
<div class="g yellow grid-33">
<p>Test</p>
</div>
</div>
</div>
And the other is to use flex: 1 1 0/flex: 2 2 0, where the flex-grow/flex-shrink is 1 of 3 and 2 of 3, so they both grow and shrink equally.
Note, is is important to use it like this, where its flex-basis is set to 0, or else the content will be taken into account before the available space will be distributed between the items.
html,
body {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
.wrapper {
max-width: 1200px;
padding: 30px;
}
.container {
display: flex;
flex-wrap: wrap;
background: red;
}
.g {
padding: 30px;
}
.grid-33 {
width: 33.3333%;
flex: 1 1 0;
}
.grid-50 {
width: 50%;
}
.grid-66 {
width: 66.6666%;
flex: 2 2 0;
}
.grid-100 {
width: 100%;
}
.white {
background: #fff;
}
.yellow {
background: #ffb401;
}
<div class="wrapper">
<div class="container">
<div class="g white grid-66">
<p>Test</p>
</div>
<div class="g yellow grid-33">
<p>Test</p>
</div>
</div>
</div>

Answer 2

If you want you can leave the width attribute and go with flex-grow it's an attribute of flex:
In your case, I tried using -
.grid-33 {
flex-grow: 3;
-webkit-flex-grow: 3;
}
.grid-66 {
flex-grow: 7;
-webkit-flex-grow: 7;
}
and in my view, it looks same if there is any change you can adjust it with flex-grow value.
html,
body {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
.wrapper {
max-width: 1200px;
padding: 30px;
}
.container {
display: flex;
flex-wrap: wrap;
background: red;
}
.g {
padding: 30px;
}
.grid-33 {
flex-grow: 3;
-webkit-flex-grow: 3;
}
.grid-50 {
width: 50%;
}
.grid-66 {
flex-grow: 7;
-webkit-flex-grow: 7;
}
.grid-100 {
width: 100%;
}
.white {
background: #fff;
}
.yellow {
background: #ffb401;
}
<div class="wrapper">
<div class="container">
<div class="g white grid-66">
<p>Test</p>
</div>
<div class="g yellow grid-33">
<p>Test</p>
</div>
</div>
</div>