3

現在、マットタブグループが含まれるフレックスボックスデザインを含むプロジェクトに取り組んでいます。私が直面している問題は、親の幅に適切に反応せず、クラスのmax-widthプロパティのみが幅に.parameters影響を与えるように見えることです。

<div class="flex-container">
  <!-- there are other elements in here -->
  <div class="flex-item">
    <div class="parameters">
      <form [formGroup]="form">
        <mat-tab-group mat-stretch-tabs>
          <!-- tabs placed here -->
        </mat-tab-group>
      </form>
    </div>
  </div>
</div>

プロパティを削除しmat-stretch-tabsても、どちらも役に立ちません。フレックスベースとしてピクセル値を使用すると、幅の計算がコンテンツに依存しなくなります。ただし、ターゲット幅が許容するよりも多くのタブがあるとすぐに、コンテンツはmat-tab-group. 上記の構造のスタイリングは次のようになります

.flex-container {
  display: flex;
}

.flex-item {
  flex: 1 1 250px;
}

.parameters {
  overflow: hidden;     /* tested, no impact */
  min-width: 0;         /* tested, no impact */
  max-width: 350px;     /* working but always 350px */
}

{width: 100%}また、プロパティをテストしましたmat-tab-groupが、どちらにも影響はありません。以下は、水平スクロールをまったく削除します（そして、/deep/私が避けたいものを使用します）。

/deep/.mat-tab-label, /deep/.mat-tab-label-active{
  min-width: 0!important;
  padding: 3px!important;
  margin: 3px!important;
}

あなたはなにか考えはありますか？私は何が欠けていますか？

4

1 に答える 1

1

これは mat-tab-group の問題ではありませんが、フレックス アイテムをそのコンテンツよりも小さくできないフレックスボックスのデフォルト設定の問題です。

min-width: 0;for flexbox item はそれをオーバーライドします。

この答えへの称賛

于 2019-04-11T14:37:17.283 に答える