Incorrect column widths in Firefox

[sarahemilym]

Is this a feature request or a bug report?
Bug report

What is the current behavior?

Expected behavior for lost-column not happening in Firefox

If it's a bug please provide the steps to reproduce it and maybe some code samples.

.foo { lost-column: 1/3 flex }

Result in chrome:

Result in Firefox:

Issue is solved by taking the calculated width and adding it as a max-width:

.foo { lost-column: 1/3 flex; max-width: calc(99.9% * 1/3 - 20px); }

What version of LostGrid, browser and browser version are affected by this issue? Did this happen in previous versions?

8.0.0

[peterramsing]

Interesting... Thanks for pointing that out. We'll see what we can do to get this patched soon. 👍

[miguelcaires]

To elaborate a bit more on this...

If you check the codepen below in FF, word wrapping appears to be working correctly.
https://codepen.io/miguelcaires/pen/qjWrOL?editors=1100

The codepen is making use of lost-waffle but the issue is exactly the same when using lost-column.

I did notice something in the output that I'm not sure to be an expected behaviour.

The compiled styles for .faqs-grid-block__category in the codepen are as follows:

.faqs-grid-block__category {
    border: 1px solid cyan;
    flex: 0 0 auto;
    width: calc(99.9% * 3/9 - (10px - 10px * 3/9));
    height: calc(99.9% * 3/9 - (10px - 10px * 3/9));
    word-wrap: break-word;
}

However, when using gulp to compile the styles:

'use strict';

const config         = require('../config');
const gulp           = require('gulp');
const postcss        = require('gulp-postcss');
const browserSync    = require('browser-sync').create();

/**
 * PostCSS plugins
 */
const lost = require('lost');

gulp.task('styles', function () {
    let plugins = [
        lost()
    ];

    return gulp.src(config.styles.filename)
        .pipe(postcss(plugins))
        .pipe(gulp.dest(config.styles.dest))
        .pipe(browserSync.reload({ stream: true }));
});

Generates additional / different flex styles that are affecting the output in FF.

.faqs-grid-block__category {
    border: 1px solid cyan;
    word-wrap: break-word;
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: calc(99.9% * 3/9 - (10px - 10px * 3/9));
    width: calc(99.9% * 3/9 - (10px - 10px * 3/9));
    height: calc(99.9% * 3/9 - (10px - 10px * 3/9));
}

flex-basis appears to be the culprit here. If we change the property value to auto as per the codepen output, problem doesn't occur anymore in FF.

Lost was installed via Yarn and is @8.0.0

@peterramsing: Hope this provides additional info and helps you identify the cause of the problem.

[equinusocio]

I have no problem here on firefox (with global flex)
https://codepen.io/equinusocio/pen/KqqQym

[miguelcaires]

@equinusocio That is exactly the issue. the generated styles on codepen are different to the ones you would get from running a gulp build.

gulp, using postcss, as posted above, is generating a flex-basis property that causes the layout to break

[peterramsing]

Looking at this today it looks like the fix should be pretty simple. It also looks like there are ways to improve the syntax for this to follow spec a bit better. 👍

I'll have a PR for this maybe this afternoon? Gotta go grocery shopping first and do some chores around the house first. 🚗 🥖 🚗 👨‍🍳 🍝 💻

[peterramsing]

@miguelcaires There was an issue here before with IE, so I'm gonna do some optimizing and then working on testing this with IE to ensure that there isn't a regression here.