Safari flexbox 和 margin-top：带有动态内容的自动答案

【问题标题】：Safari flexbox & margin-top: auto with dynamic contentSafari flexbox 和 margin-top：带有动态内容的自动
【发布时间】：2018-02-03 19:52:57
【问题描述】：

使用 flexbox 布局，我有一个左栏导航，菜单位于顶部，一个小的版权页脚使用margin-top: auto; 方法粘在底部。该页面位于 React 应用程序中，组件在初始绘制后调用 API 以获取数据。一旦加载内容区域，然后扩展超出视口。我没有使用 100vh，所以我希望它会像 Chrome 和 Firefox 一样扩展到文档的其余部分。相反，版权和导航在向下滚动以查看页面的其余部分时保持视口的高度。

目前它适用于 Firefox 和 Chrome，但不适用于 Safari。自从我进行故障排除以来，可能有一点额外的 CSS 对父母没有任何作用。

html, body {
  height: 100%;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

.app {
  max-width: 100vw;
  height: 100%;
  display: flex;
  align-content: stretch;

  .AppContainer {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    align-content: stretch;
    height: 100%;
    width: 100vw;

    .navigation-container {
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      height: 100%;

      .navigation {
        width: 220px;
        margin-bottom: 40px;
      }

      .footer {
        margin-top: auto;
        color: #CCC;
        font-size: 1.4rem;
        line-height: 1.6rem;
        padding: 0 20px 20px;
      }
    }
  }
}

【问题讨论】：

你试过 align-self: „flex-end“ 在页脚
我没有，但只是做了。零效应好坏。
在进一步研究中.navigation-container 没有达到 100% 的高度；
尝试从.AppContainer 中删除align-items: flex-start; height: 100%; 并从.navigation-container 中删除height: 100%; ...如果这没有帮助，您需要提供一个工作代码sn-p 来重现该问题

标签： css safari sass flexbox

【解决方案1】：

将position: relative 添加到.navigation-container 和position: absolute 到.footer。似乎只影响 Safari。在这种情况下，如果没有额外的定位属性，其他浏览器可能不太关心。

【讨论】：