Dlaczego po zmianie width na flex-basis wielkość ulega zmianie?

Używam flexboxa. Dlaczego jeśli ustawię width na 300px to mam jedną szerokość elementów a jak zamienię to na flexbasis też na 300px to jeden element jest większy od pozostałych? A jeden box jest dłuższy....

        .container {
            display: flex;
            flex-direction: column;
            background-image: url("images/bg-mobile.png");
            height: 100%;
       
            align-content: center;
            justify-content: center;
            align-items: center;

        }

        .box {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            color: white;
            border-radius: 15px;
            background-color: hsl(228, 56%, 26%);
            margin: 20px;
            width: 300px;
            padding: 50px;

        }

https://zapodaj.net/80158a6540a68.png.html
https://zapodaj.net/2212fadb8e7ed.png.html

Masz ustawione flex-direction: column;
Więc flex-basis nie odnosi się do szerokości tylko wysokości elementów.

Ma to sens... Teraz to widzę...

Dlatego wysokość była 2x taka, ponieważ działał flex-basis a nigdzie nie ustawiałam tak naprawdę szerokości...