Flexbox不能在图像上使用100％宽度，svg截止所需的宽度为100％

Question

所以我有以下div：

class MagicSquare{
public:
    MagicSquare(int sideLenght);
    void printAllForms();
    void setsideLenght(int num);
    int**getMagicSquare();
    void printSquare(int** square);
    ~MagicSquare();
private:
    int sideLenght;
    int**square;
};

//constructor
MagicSquare :: MagicSquare(int sideLenght)
{
    this-> sideLenght = sideLenght;

//initialization of square and setting values to 0
int**square = new int*[sideLenght];
for(int i = 0; i !=sideLenght; i++)
    square[i] = new int[sideLenght];

for(int i = 0; i<sideLenght; i++)
{
    for(int j = 0; j<sideLenght; j++)
    {
        square[i][j] = 0;
    }
}

//making the square magic
int row = sideLenght/2;
int col = sideLenght-1;
for(int i = 1; i<sideLenght*sideLenght+1;)
{
    if(row == -1 && col == sideLenght)
    {
        row++;
        col -= 2;
    }else{
        if(col == sideLenght)
            col = 0;
        if(row == -1)
            row = sideLenght-1;
    }
    if(square[row][col] != 0)
    {
        col -= 2;
        row++;
        continue;
    }else{
        square[row][col] = i;
        i++;
    }
    row--;
    col++;
}
}

MagicSquare :: ~MagicSquare(){
    if(square != NULL){
        for(int i = 0; i < sideLenght; ++i){
            delete[] square[i];
    }
delete[] square;
}
}

//print original and rotated 2D array
void MagicSquare :: printAllForms(){

for(int i = 0; i<sideLenght; i++){
    for(int j = 0; j<sideLenght; j++){
        std::cout<<square[i][j]<<"\t";
    }
    std::cout<<std::endl;
}

int**rotatedSquare = new int*[sideLenght];
for(int x=0; x<4; x++){
    for(int i = 0; i<sideLenght; i++)
        square[i] = new int[sideLenght];

    for(int i=0; i<sideLenght; i++)
        for(int j=0; j<sideLenght; j++)
            rotatedSquare[i][j] = square[sideLenght-1-j][i];

    for(int i = 0; i<sideLenght; i++){
        for(int j = 0; j<sideLenght; j++){
            std::cout<<rotatedSquare[i][j]<<"\t";
        }
        std::cout<<std::endl;
    }
}

}

void MagicSquare :: setsideLenght(int sideLenght){
    this-> sideLenght = sideLenght;
}

int** MagicSquare :: getMagicSquare(){
    return square;
}

//prints inputed 2D array
void MagicSquare :: printSquare(int**matrix){
    for(int i = 0; i<sideLenght; i++){
        for(int j = 0; j<sideLenght; j++){
            std::cout<<matrix[i][j]<<"\t";
        }
        std::cout<<std::endl;
    }
}

它包含一个svg图像，它本身具有以下类：

.outer-div {
    background-color: red;
    height: 180px;
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: flex-start;
}

我希望我的svg图像显示在左侧，因此应该应用flex-start。

但是，我的svg图像总是在父div中居中。我可以通过从svg图像的CSS（.logo-main）中删除.logo-main { /* style for the svg image*/ height: 50px; width: 100%; } 来使图像显示在最左侧（flex-start）。但是，我然后有问题，我的svg在右侧切断。

我该如何解决这个问题？