Css 如何将水平滚动添加到mat autocomplete

我正在运行angular应用程序，我已经自动完成了，我想在mat选项中添加水平滚动，我尝试了应用css样式

.cdk-overlay-pane {
  overflow-x: auto;
}

 then applying syle as told in this docuemnt [enter link description here][1] showPanel: boolean

  <mat-option class="CustomerDropDown" showPanel="true" ...

.cdk覆盖窗格{
溢出-x：自动；
}
然后按照本文档中的说明应用syle[enter link description here][1]showPanel:boolean
HTML

<cdk-virtual-scroll-viewport itemSize="50" class="example-viewport">
  <div *cdkVirtualFor="let item of items" class="example-item">{{item}}</div>
</cdk-virtual-scroll-viewport>

CSS

.example-viewport {
  height: 200px;
  width: 200px;
  border: 1px solid black;
}

.example-item {
  height: 50px;
}

也可以点击这个链接
尝试以下CSS。这对我有用

：：ng deep.custom mat option.mat option text{
溢出：自动；
文本溢出：未设置；
//颜色：绿色；
}

custommatoption
是我添加到
元素中的一个类，用于增加css的特殊性

嗨，Chris，你的解决方案在Stackblitz中有效，但在我的应用程序中，我根本找不到mat选项文本类，我的应用程序限制我只使用angular6。这可能是不同之处，否则解决方案是完美的，您使用哪种角度材质版本？它是“@angular/material”：“^6.4.7”，根据来源，角度材质6.4.x中应该有一个
mat选项。（）您是否在HTML中使用
元素？你能用HTML扩展你的问题吗？HTML显示了
mat autocomplete
的用法。我确实使用mat选项来填充数据，但我看不到mat选项文本
import {ChangeDetectionStrategy, Component} from '@angular/core';

/** @title Basic virtual scroll */
@Component({
  selector: 'cdk-virtual-scroll-overview-example',
  styleUrls: ['cdk-virtual-scroll-overview-example.css'],
  templateUrl: 'cdk-virtual-scroll-overview-example.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class CdkVirtualScrollOverviewExample {
  items = Array.from({length: 100000}).map((_, i) => `Item #${i}`);
}

.example-viewport {
  height: 200px;
  width: 200px;
  border: 1px solid black;
}

.example-item {
  height: 50px;
}