CSS flexbox giving unexpected output

I have below markup for testing flexbox:

<html>
    <head>
        <style>
            .parent{
                display: flex;
                flex-direction: column;
            }
           .parent>div>button{
               display: flex;
           }
           .parent>div:nth-child(2){
               display: flex;
           }
        </style>
    </head>
    <body>
        <div class="parent">
            <div class="div1"><button>butt1</button><button>butt7</button></div>
            <div class="div2"><button>butt2</button><button>butt3</button><button>butt4</button>
                <button>butt5</button><button>butt6</button></div>
        </div>
    </body>
</html>

Its output is given below:

What I don't understand is that even if we haven't given any flex-direction: column to the div1 i.e., we haven't written:

.parent>div>button{
   display: flex;
   flex-direction: column;
  }

even then butt1 and butt7 are aligned in column. Why they are not aligned in row?? Is it the case that child div inherits the value of flex-direction of parent? I have read that default value of flex-direction is row. So, with that logic as well, they should have been aligned row-wise, not column-wise.

Please help me to find the reason of above behaviour.

Thank You.