为什么flex-basis不使用flex-direction'column'来设置flex-items的高度？

Question

这是我的HTML：

<!-- NEW MEMBERS -->
<section class="new-members">
    <h2>New Members</h2>

    <div class="member">
        <img class="member-image" src="images/member-1.jpg" />
        <div class="member-info">
            <p>Victoria Chambers</p>
            <a href="mailto:webmaster@example.com">victoria@hotmail.com</a>
        </div>
        <p class="date">12/04/20</p>
    </div>

    <div class="member">
        <img class="member-image" src="images/member-2.jpg" />
        <div class="member-info">
            <p>Dale Byrd</p>
            <a href="mailto:webmaster@example.com">byrd@hotmail.com</a>
        </div>
        <p class="date">12/04/20</p>
    </div>

    <div class="member">
        <img class="member-image" src="images/member-3.jpg" />
        <div class="member-info">
            <p>Dawn Wood</p>
            <a href="mailto:webmaster@example.com">wood@hotmail.com</a>
        </div>
        <p class="date">12/04/20</p>
    </div>

    <div class="member">
        <img class="member-image" src="images/member-4.jpg" />
        <div class="member-info">
            <p>Dan Oliver</p>
            <a href="mailto:webmaster@example.com">oliver@hotmail.com</a>
        </div>
        <p class="date">12/04/20</p>
    </div> 

</section>


<!--RECENT ACTIVITY-->
<section class="recent-activity">

    <h2>Recent Activity</h2>

    <div class="member">
        <img class="member-image" src="images/member-1.jpg" />
        <div class="member-info">
            <p>Victoria Chambers commented on YourApp's SEO Tips</p>
            <p>4 hours</p>
        </div>
        <span class="arrow">&#10148;</span> 
    </div>

    <div class="member">
        <img class="member-image" src="images/member-2.jpg" />
        <div class="member-info">
            <p>Dale Byrd likes the post Facebook's Changes for 2016</p>
            <p>4 hours</p>
        </div>
        <span class="arrow">&#10148;</span> 
    </div>

    <div class="member">
        <img class="member-image" src="images/member-3.jpg" />
        <div class="member-info">
            <p>Dawn Wood commented on Facebook's Changes for 2016</p>
            <p>5 hours</p>
        </div>
        <span class="arrow">&#10148;</span>
    </div>

    <div class="member">
        <img class="member-image" src="images/member-4.jpg" />
        <div class="member-info">
            <p>Dan Oliver posted YourApp's SEO Tips</p>
            <p>1 Day</p>
        </div>
        <span class="arrow">&#10148;</span> 
    </div> 

</section>

这是我对应的CSS：

/* NEW MEMBERS */ 
/* RECENT ACTIVITY */
.new-members, 
.recent-activity {
    display: flex;
    flex-direction: column;
}

.member {
    height: 65px;
    display: flex;
    align-items: center;
}
.member-image {
    border-radius: 50%;
    width: 10%;
    max-width: 70px;
} 

/* RECENT ACTIVITY */
.date {
    margin-left: auto;
}
.arrow {
    content: "\27A4";
    margin-left: auto;
} 

每个成员div是一个flex项目，并且flex容器的flex方向设置为column。如果flex-basis在主轴上运行，并且因为flex-container设置为column，那么为什么flex-basis不能像我也想要的那样操纵flex-item的高度？

如果要操纵它们的高度，则必须使用height属性来完成，但是为什么不能使用flex-basis属性来做到呢？没有设置明确的高度，弹性项目就会溢出：

例如： 高度属性，值为65px：https://ibb.co/1RBdbby 具有相同精确值的Flex-basis属性（其效果不同）：https://ibb.co/t8K4HR3

为什么高度比flex-basis属性更好？我认为当flex-direction设置为column时，flex-basis一定会操纵flex-items的高度。