高度设置为7rem，但是在视口缩小时会缩小吗？

Question

The link buttons in this demo的高度设置为7雷姆。

   <a class="Button
             u-flex-shrink0
             u-flex-grow1
             u-height7rem
             href="Site" >Site</a>
   <a class="Button
             u-flex-shrink0
             u-flex-grow1
             u-height7rem" href="Site--centered" >Site--centered</a>

这是链接中包含的代码的近似值：

    <nav style="display: flex; align-items: stretch; ">
       <a style="flex-shrink: 0; flex: 1 1 0%; display: inline-flex; height: 7rem; background-color: gray;" href="Site" >Site</a>
       <a style="flex-shrink: 0; flex: 1 1 0%; display: inline-flex; height: 7rem; background-color: gray;" href="Site">Site--centered</a>       
    </nav>

如果视口缩小，则按钮的高度也会变小。我试图找出原因，因为容器元素上有高度限制。

如果我移除flex: 1 1 0%;，则按钮的高度将为7rem，因此，我试图了解为什么flex: 1 1 0%;会覆盖高度。

更仔细地研究它，似乎flex-basis 0％会覆盖高度设置...但仅在按钮内容换行时...因此，我试图更好地理解这种动态效果...

Answer 1

通过将以下内容添加到您的类“ .u-height7rem”中，我能够使其在开发工具中正常工作

min-height: 7rem;