CODEWITHSUNDEEP
htmlcssflexbox
Benn
Benn

Reputation: 5023

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

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.

Upvotes: 2

Views: 4824

Answers (2)

Asons
Asons

Reputation: 87201

That issue is a bug (or rounding issue) that among other Chrome and Edge have, but not Firefox.

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>

Upvotes: 3

Jithin Raj P R
Jithin Raj P R

Reputation: 6797

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>

Upvotes: 1

Related Questions