使用 flex-layout 设置宽度导致左侧被切断而没有滚动答案

【问题标题】：Setting width with flex-layout causing left side to cut off with no scroll使用 flex-layout 设置宽度导致左侧被切断而没有滚动
【发布时间】：2019-12-16 10:30:25
【问题描述】：

我正在使用 Angular 7 和 Angular flex-layout ^7.0.0-beta.24。我遇到了一个问题，当我设置 div 的宽度时，最小化超过该 div 宽度的窗口会导致左侧被截断，并且没有滚动查看内容的选项。

我尝试在 div 上设置最小和最大宽度，尝试媒体查询，尝试将外部容器的宽度设置为 100%，但没有成功。我还尝试将溢出设置为自动或滚动，以及将溢出-x 和 y 设置为自动或滚动仍然没有使 div 保持左侧静态并通过向右滚动挤压右侧

我的scss：

.details-page {
  background-color: #f3f4f5;
  color: #292929;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  font-weight: 400;
  border: 1px solid red;  // for testing

  .heading {
    height: 55px;
    margin: 36px 24px !important;
    width: 976px;  // if I remove this, everything is fine scroll-wise but the div contents look weird and I need to have this width here to match design specs
  }
}

我的html：

<div class='details-page'>
  <div fxLayout='column' fxLayoutAlign='center center' fxLayoutGap='16px'>
    <!-- asset header and backlink -->
    <div class='heading' fxFlex='100'>
      This is a heading kajhdkjhag jkh jskfhg kjh kajshg kh jkhkjh asdf jh kljh
    </div>
  </div>
</div>

屏幕宽度大于 976 像素的图像：

屏幕小于 976 像素的图片：

【问题讨论】：

可能相关：stackoverflow.com/q/33454533/3597276
这确实解释了问题，但没有解释如何解决 flex-layout 的问题，因为所有这些 flex 都在幕后发生。我想我可以摆弄 fxLayoutAlign 但我真的希望标题列以 976px 的宽度居中，直到我使用屏幕宽度fxLayoutAlign='center center' 工作得很好¯_(ツ)_/¯跨度>
请发布足够的代码来重现问题。我之前的评论因您的帖子缺乏细节而受到限制。
这就是我在 Angular 7 和 flex-layout 7.0.0-beta.24 应用程序中重现问题的所有代码......

标签： css angular sass flexbox angular-flex-layout

【解决方案1】：

好的，所以关闭 Michael_B 在评论中发布的链接，似乎 fxLayoutAlign='center center' 使用 justify-content: center 和 align-items: center; align-content: center

我仍然不确定为什么 flex 会真正居中，这似乎是自 Angular flex-layout 8 以来已修复的限制。

我将它更新为 html（注意 fxLayoutAlign='center center' 更改为 fxLayoutAlign='center start'）：

<div class='details-page'>

  <div fxLayout='column' fxLayoutAlign='center start' fxLayoutGap='16px'>
    <!-- header and backlink -->
    <div class='heading' fxFlex='100'>
      <div fxLayout='column' fxLayoutAlign='start start' fxLayoutGap='5px'>
        <div>
          <a routerLink='list' class='link'>
            < Back to list
          </a>
        </div>
        <div class='title'>
          Details
        </div>
      </div>
    </div>
  </div>
</div>

还有我的 scss：

.details-page {
  background-color: #f3f4f5;
  color: #292929;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  font-weight: 400;
  width: 100%;
  margin: auto;

  .heading {
    height: 55px;
    margin: auto;
    padding: 36px 24px;
    width: 976px;

    .link {
      color: #0458e6;
      font-size: 12px;
      text-decoration: none;
    }

    .title {
      font-size: 36px;
      font-weight: 300;
    }
  }
}

【讨论】：