SCSS 的 Flexbox 在 Firefox 上正常工作，但在其他浏览器上不能正常工作（例如 Chrome、Edge 等）

Question

我目前正在使用 Gatsby.js 和 SASS 进行样式设计的项目。创建输入字段时，我们遇到了容器及其项目仅在 Firefox 上正确显示的问题，而在 Chrome、Edge、IE 等其他浏览器上则无法正确显示。有趣的是，它在任何浏览器的移动视图上都能正确显示。

我已经尝试了一些方法，当从页面 SCSS 文件中删除 display: flex; 时，它在所有使用的浏览器上都以相同的方式显示（当然，看起来很糟糕）。所有页面都从主/全局文件中获取样式，但也有各自的 SCSS 文件。

取自其组件的输入字段：

<form onSubmit={this.handleSubmit} className={styles.formBox}>
            <fieldset className={styles.formGroup}>
                <label htmlFor="production">Text</label>
                <input
                    type="number"
                    name="production"
                    value={this.state.production}
                    onChange={this.handleInputChange}
                    className={styles.numberInput}
                    placeholder="Enter input"
                />
                <label htmlFor="unit">Text</label>
                <select
                    name="unit"
                    className={styles.selectionField}
                    value={this.state.unit}
                    onChange={this.handleInputChange}
                >
                    <option value="Value1" className={styles.optionField}>Value1</option>
                    <option value="Value2" className={styles.optionField}>Value2</option>
                </select>
                <label htmlFor="unit">Text</label>
                <select
                    name="weight"
                    className={styles.selectionField}
                    value={this.state.weight}
                    onChange={this.handleInputChange}
                >
                    <option value="value1" className={styles.optionField}>value1</option>
                    <option value="value2" className={styles.optionField}>value2</option>
                </select>
                <button type="submit" className="btn text-uppercase btn-primary--orange hover-effect btn-block-xs-only">Text</button>
            </fieldset>
        </form>

SCSS 文件：

$border-radius: .25rem;
$button-border-radius: 290486px;
$input-border-width: 2px;
$dark-blue: #000460;
$font-color: #07112a;

.form-box {
    border-radius: $border-radius;
    box-shadow: 0 22px 45px 0 rgba(0, 0, 0, 0.11);
    background-color: #ffffff;
    padding: 24px;
}

.form-group {
    display: inline-flex;
    justify-content: space-between;
    // display: -webkit-flex;
    // display: -ms-flex;
    // display: -webkit-box;
    // display: flex;

    label {
        position: absolute;
        visibility: hidden;
        text-align: left;
    }

    .number-input {
        border: $input-border-width solid $dark-blue;
        border-radius: $border-radius;
        color: $font-color;
        font-size: 16px;
        margin-right: 1em;
        padding-left: 1em;
        // width: 100%;

        &::-webkit-input-placeholder {
            /* Edge */
            color: $font-color;
            opacity: 1;
        }

        &:-ms-input-placeholder {
            /* Internet Explorer 10-11 */
            color: $font-color;
            opacity: 1;
        }

        &::placeholder {
            color: $font-color;
            opacity: 1;
        }
    }


    .selection-field {
        background-color: $dark-blue;
        background-image:
            linear-gradient(45deg, transparent 50%, $dark-blue 50%),
            linear-gradient(135deg, $dark-blue 50%, transparent 50%),
            radial-gradient(white 70%, transparent 72%);
        background-position:
            calc(100% - 20px) calc(1.25em + 2px),
            calc(100% - 15px) calc(1.25em + 2px),
            calc(100% - .5em) .75em;
        background-size:
            5px 5px,
            5px 5px,
            1.5em 1.5em;
        background-repeat: no-repeat;
        border: $input-border-width solid $dark-blue;
        border-radius: $border-radius;
        color: white;
        font-size: 16px;
        margin-right: 1em;
        min-width: 100px;
        padding-left: .5em;

        -moz-appearance: none;
        -webkit-appearance: none;
        appearance: none;

        &::-ms-expand {
            display: none;
        }

        &:hover {
            cursor: pointer;
        }

        &:focus {
            background-image:
                linear-gradient(45deg, $dark-blue 50%, transparent 50%),
                linear-gradient(135deg, transparent 50%, $dark-blue 50%),
                radial-gradient(white 70%, transparent 72%);
            background-position:
                calc(100% - 15px) 1.25em,
                calc(100% - 20px) 1.25em,
                calc(100% - .5em) .75em;
            background-size:
                5px 5px,
                5px 5px,
                1.5em 1.5em;
            background-repeat: no-repeat;
            color: white;
            outline: 0;
        }

        .option-field {
            text-align: center;
            background-color: white;
            border-radius: 10px;
            color: $font-color;
        }
    }

    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    input[type=number] {
        -moz-appearance: textfield;
    }

    button {
        border-radius: $button-border-radius;
    }
}

@media (max-width: 768px) {
    .form-group {
        flex-direction: column;

        .number-input,
        .selection-field {
            height: 55px;
            margin: 0 0 1em 0;
        }
    }
}

Firefox（它的外观：

铬：

我无法完全理解为什么会发生这种情况。接下来我可以尝试什么？

Answer 1

问题很可能与此有关。

@media (max-width: 768px) {
    .form-group {
        flex-direction: column;

        .number-input,
        .selection-field {
           height: 55px;

您的 Chrome 视口可能较小，导致它们堆叠为列，并且还可以解释输入的裁剪高度