Странное поведение CSS-селекторов (не применяется свойство)

У меня есть простой калькулятор, построенный на flexbox.

Проблема: В разметке для кнопки не применяется свойство flex-basis. При том, если я меняю селектор с .button на div .button, оно начинает работать (что странно ведь, по факту, так круг только сужается, не наоборот). Более того, это относится только к flex-basis. Все остальные свойства (включая width) работают как положено.

Для понимания ситуации, привожу упрощённый код ниже:

HTML-вёрстка его клавиатуры на React упрощённо выглядит так:

export default function Keyboard() {
    return (
        <div className="keyboard">
            <div>
                <Button name={"AC"}  />
                <Button name={"+/-"} />
                <Button name={"%"}   />
                <Button name={"÷"}   />
            </div>
            <div>
                <Button name={"7"} />
                <Button name={"8"} />
                <Button name={"9"} />
                <Button name={"x"} />
            </div>
            ...
        </ div>
    );

А упрощённый код Button так:

export default function Button(props) {    
    return (
        //В данном случае, className="button"
        <div className={divClassName}>
            <button>{props.name}</button>
        </div>
    )
}

При этом я имею SCSS-вёрстку для Keyboard и для Button:

.keyboard {
    //Выкладываю ряды кнопок друг за другом.
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;

    //Применяю margin между кнопками, чтобы красиво было.
    div {
        margin-bottom: 1px;
        .button {
            margin-right: 1px;
        }
        //И не забываю кнопки тоже упаковать в flex-контейнер
        display: flex;
        flex: 1 0 auto;
    }
}

------

//Здесь мог бы быть "div .button {...}" и всё бы заработало.
.button {

    //Применяю flex-basis чтобы кнопки были одного размера и вычитаю 1px маргина
    //Именно с этим свойством возникают ошибки.
    flex-basis: calc(25% - 1px);
    &.wide {
        //Там просто в нижнем ряду мог быть нолик с шириной 50%
        flex-basis: calc(50% - 1px);
    }
   
    button {
        border: 0;
        width: 100%;
        height: 100%;
        &:focus {
            outline: 0;
        }
    }
}

Эти две вёрстки в оригинале находятся в разных файлах и подключаются из файлов компонентов Keyboard и Button отдельно. (Чтобы это работало, я использую Webpack)

Пожалуйста, объясните мне это поведение.