Fixing display flex with columns of percent width and 1px gap: A step-by-step guide

When displaying flex columns with percent width on a specific width, make sure to leave a 1px gap between them. Check out the screenshot here

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>

Check out the fiddle here

I've already attempted adjusting the grid-33 to 33.3334%, but it doesn't work as expected. Unfortunately, I can't manually adjust specific columns due to the constraints of the framework I'm using. If anyone has any suggestions on how to resolve this issue with flexbox dimensions, it would be greatly appreciated.

Your assistance is valued.

htmlcssflexbox

Answer №1

It has come to my attention that there is an issue with Chrome and Edge browsers, which appears to be a bug or rounding issue, but interestingly does not affect Firefox.

  • Learn more about this issue here
  • Discover possible workarounds here
  • Read about sub-pixel problems in CSS

After some research, I have found two workarounds for this issue. The first one involves adding justify-content: space-between; to the flex container, although there may still be a slight 1px issue in Chrome at certain screen widths.

Check out the code snippet below:

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>

The other workaround involves using flex: 1 1 0 or flex: 2 2 0, where the flex-grow / flex-shrink values are set to 1 of 3 and 2 of 3 respectively, allowing for equal growth and shrinkage of the items.

It is important to note the correct usage of flex-basis as 0, as this ensures that available space will be distributed evenly among 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 prefer, you have the option to omit the width attribute and utilize flex-grow, which is a property of flex:

In this scenario, I experimented with -

.grid-33 {
  flex-grow: 3;
  -webkit-flex-grow: 3;
}

.grid-66 {
  flex-grow: 7;
  -webkit-flex-grow: 7;
}

From my perspective, the appearance remains consistent, but should you notice any discrepancies, you can fine-tune it by adjusting the value of flex-grow.

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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The problematic max-width with srcset attribute

Here's the HTML markup I'm working with: <picture> <source srcset="img/home-page/placeholders/placeholder_2560.jpg" media="(max-width: 2560px)"> <source srcset="img/home-page/placeholders/placeh ...

htmlcsssrcset

Tips for accurately placing the iOS audio player in the footer section

In my web page, I have created a simple footer that shows the currently playing track title and includes an HTML audio player. The layout looks great on desktop browsers and Android devices, but on iOS, the player is positioned far below the footer. To ad ...

htmlioscsshtml5-audio

List of dropdown options retrieved from SQLite database

I am attempting to retrieve data from an SQLite database table in order to populate a dropdown menu list. My thought process is outlined below. The main issue I am facing is how to integrate the JS function with the HTML section. HTML.html <label ...

javascripthtmlsqlitephonegap

Directly within Angular, map the JSON data to an object for easy assignment

I came across this information on https://angular.io/guide/http. According to the source, in order to access properties defined in an interface, it is necessary to convert the plain object obtained from JSON into the required response type. To access pr ...

htmlangulartypescript

sliderLighter: keep the slider moving smoothly at a constant speed

I am currently utilizing lightSlider and I want to create a continuous sliding effect with consistent speed. I do not want any stops or pauses between the images, just a smooth and constant movement. Is it possible to achieve this using lightSlider? Or per ...

htmlcss

Excessive Width Issue Caused by Bootstrap 4 Navbar Items

Having trouble with my Bootstrap 4 Navbar menu implementation. When I add more items, they overflow the container instead of floating correctly. Any CSS suggestions to temporarily fix this issue? <!DOCTYPE html> <html lang="en"> <head> ...

htmlcsstwitter-bootstrapnavbar

How to display and download a PDF file on a JSP web page

Can anyone help me with a simple trick to solve this question I have? In my project folder, I have 5 PDF files named file1.pdf, file2.pdf, file3.pdf, file4.pdf, and file5.pdf. I want to display these files in 5 rows on my webpage, each row containing VIEW ...

javascripthtmljspprinting

Increasing the font size by 1px for each element within a specified parent element

Is there a method to automatically increase the font size of all elements within the .wrap container by 1px, without having to adjust each one individually? .wrap{ margin-top: 169px; .element1{ font-size:31px; } .element2{ ...

csssassfont-size

Using PHP to perform live calculations with arrays in real time

Currently, I am working on developing a new system for a client that allows them to create bookings and invoices to send to their clients. One specific requirement my client has is the need for a table column to be added below the container columns in whi ...

javascriptphphtmlajax

Is there a way to define the width of an element within the display:flex property in CSS?

Could you please review the following: https://codepen.io/sir-j/pen/dyRVrPb I am encountering an issue where setting the input [type=range] to 500px doesn't seem to make a difference from 100px, 500px, or 800px. This leads me to believe that display ...

javascripthtmljquerycss

Text in various styles is layered on top of an image, ensuring that text in one style does not overlap text in another style

Struggling with placing text over an image? Trying to achieve different text styles but ending up with overlapping lines? Here's a snippet of HTML that works with only one text style: <li style="" class="portfolio-content-CV"> <div class ...

htmlcss

The jQuery hide and show functions lack precision and are too indiscriminate, requiring a more targeted approach

I am designing a unique contact card that captures a user's name and description from an <input> field and appends the input information into a <div> element. This is the flow I am aiming for... User inputs their first and last name alo ...

javascriptjqueryhtml

Switch from hover effects to CSS3 animations triggered on page load

I found this code snippet on https://codepen.io/chriscoyier/pen/NWNJpdJ. Can someone help me modify it to change the counter on page load instead of hover? Also, I want the counter to stop at 100 without resetting back to 0. @property --num { syntax: ...

htmlcss

What is the best method to determine the accurate height of a window that works across all browsers and platforms?

Is there a way to accurately determine the visible height of the browser window, taking into consideration any floating navigation bars or bottom buttons that may interfere with the actual viewing area? For example, mobile browsers often have floating bar ...

javascriptjqueryhtmlcssbootstrap-modal

Discussing a non-existent web address

Is it possible to generate a URL that appears to exist but actually doesn't? Take, for example, https://twitter.com/i/notifications - this link functions as expected. However, if you delete the /notifications segment from the URL, you end up with http ...

phphtml.htaccessurlrequest-uri

I'm curious why I can only see the HTML code and not the three.js code as well

I attempted to run a sample three.js game today, but only the HTML code appeared. I've also installed three.js with npm and tried running it with the VSC Live Server, but it's not working. You can find the source code here. What should be my nex ...

javascripthtmlcssthree.js

Extract the content within the span tags while preserving any line breaks

I have a situation where a span element contains text with line breaks, and there is a function in place to copy this content to the clipboard. My goal is to maintain the line breaks when the data is pasted into another tool or page that supports HTML. C ...

jqueryhtmlclipboardline-breaks

Encountering a problem with React components displaying incorrect sizes while utilizing flexbox styling

I am creating a basic test application using NextJS/React. Take a look at the code snippet below: The content of Board.tsx file: import './Board.css'; export default function Board() { return <div className="board"> < ...

cssreactjsnext.jsflexbox

The issue of the JQuery div failing to center itself persists even after refreshing the page

I have implemented a script to centrally align the main content div within the viewing area. It works perfectly on page load or resize, but upon page refresh, the content div shifts to the left side of the page. You can see the issue here when pressing re ...

jqueryhtml

Utilizing conditional styling in React: the ability to add or attach CSS classes based on

Is there a more efficient way to implement conditional formatting for this scenario? const PaginationStorePageLink = ({ store, pageNum }) => (observer(({ PaginationStore }) => { const className = this.props.store.currentPage === this.props.pageNum ...

javascriptcssreactjsjsx