高度设置为7rem，但视口缩小时会缩小？答案

【问题标题】：Height set to 7rem, but shrinks when the viewport shrinks?高度设置为7rem，但视口缩小时会缩小？
【发布时间】：2019-05-16 10:24:19
【问题描述】：

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

   <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% 会覆盖高度设置......但只有当按钮内容换行时......所以我试图更好地理解这种动态......

【问题讨论】：

第二个问题没有 MCVE .. 你需要在这里分享代码，以便我们给你答案
不，链接可能会失效或可以编辑以不再显示初始问题
我们妥协怎么样 - 如果答案没有包含足够的信息来推断问题的完整上下文（图像描绘了一个很好的上下文）我将跟进 MVCE 代码？
我不是在谈论 now .. 我可以很容易地给你一个答案，它是关于应用 flex-basis:100% 的 .u-flex-grow1。现在想想未来：您的链接将失效，我们不知道您正在应用的 CSS，因为您只共享了一个 html 代码，因此您的问题将变得毫无用处，它将被关闭、否决、删除。
经过 6 年和 500 多个问题，您应该知道代码图像是一件非常糟糕的事情。

标签： html css

【解决方案1】：

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

min-height: 7rem;

【讨论】：