我已经创建了一个Blazor WebAssembly解决方案，并且正在从示例Blazor应用程序构建它.我必须处理一个需要水平溢出的表(它有太多列).不幸的是，这个溢出的表拉伸了table-container个div和整个page个div，并在整个页面上添加了一个水平滚动条.
我想要的是只向包含表的div(在下面的例子中是table-container)添加一个水平滚动条，大概是overflow-x: auto;.水平滚动条不应出现在整个页面上.此外，我不希望桌子拉伸其容器或任何其他元素.
我看到的一个解决方案是将page元素设置为display-block，而不是display-flex，因为flex行为似乎会导致这个问题.然后，我需要重新安排所有其他元素-所以我想避免这种情况，如果可能的话.使用vw设置table-container的宽度也解决了这个问题，但我不确定它是否在所有屏幕上都有足够的响应.
除了将div的宽度固定为vw，或者将整个应用程序的宽度改为display-block之外，还有其他解决方案吗？
要重新创建此方案，请执行以下操作:
- 创建Blazor WebAssembly托管应用程序示例
- 使用以下示例之一创建页面
Simple Paragraphs Sample个
我已经添加了2000px的宽度来模拟溢出.
@page "/test"
<div id="should-contain-scrollbar" class="mt-2" style=" overflow-x: auto; white-space: nowrap;">
<div style="width: 2000px;">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae nunc sed velit dignissim sodales ut eu sem. Imperdiet dui accumsan sit amet nulla. Vestibulum lectus mauris ultrices eros in cursus turpis massa tincidunt. Elit duis tristique sollicitudin nibh sit amet commodo nulla facilisi. Congue quisque egestas diam in arcu cursus. Mattis nunc sed blandit libero volutpat sed cras ornare. Vitae congue mauris rhoncus aenean vel elit scelerisque. Pellentesque diam volutpat commodo sed egestas. Vitae tempus quam pellentesque nec. Egestas sed sed risus pretium.
</p>
<p>
Dolor purus non enim praesent elementum facilisis leo vel fringilla. Arcu bibendum at varius vel pharetra vel turpis. Adipiscing elit duis tristique sollicitudin. Diam vulputate ut pharetra sit. Mauris sit amet massa vitae tortor condimentum lacinia quis vel. Nisl pretium fusce id velit ut tortor pretium. Mauris ultrices eros in cursus turpis massa. Donec adipiscing tristique risus nec. Lorem sed risus ultricies tristique. Arcu bibendum at varius vel pharetra vel. Ac ut consequat semper viverra. A arcu cursus vitae congue mauris rhoncus. Malesuada proin libero nunc consequat interdum varius sit amet. Vitae suscipit tellus mauris a. Nunc vel risus commodo viverra maecenas accumsan lacus vel. Netus et malesuada fames ac turpis.
</p>
<p>
Auctor neque vitae tempus quam pellentesque nec nam. Leo in vitae turpis massa sed elementum tempus. Sapien faucibus et molestie ac. Cursus eget nunc scelerisque viverra mauris. Elit eget gravida cum sociis natoque penatibus. Et tortor consequat id porta nibh venenatis. Amet commodo nulla facilisi nullam. Sapien faucibus et molestie ac feugiat. Vitae tempus quam pellentesque nec nam aliquam. Id volutpat lacus laoreet non curabitur gravida arcu ac. Mi bibendum neque egestas congue quisque egestas diam in arcu. Tellus id interdum velit laoreet id donec ultrices. Id eu nisl nunc mi ipsum faucibus vitae. Ullamcorper morbi tincidunt ornare massa eget egestas purus. Varius morbi enim nunc faucibus a pellentesque sit amet porttitor. Non pulvinar neque laoreet suspendisse interdum. Quam id leo in vitae turpis. Parturient montes nascetur ridiculus mus mauris vitae ultricies. Venenatis lectus magna fringilla urna.
</p>
<p>
Risus viverra adipiscing at in tellus integer feugiat. Massa enim nec dui nunc mattis enim. Commodo ullamcorper a lacus vestibulum sed arcu non. Fermentum leo vel orci porta non pulvinar. Habitant morbi tristique senectus et netus et malesuada fames. Quam id leo in vitae turpis massa sed elementum tempus. Nullam eget felis eget nunc. Varius sit amet mattis vulputate enim nulla aliquet porttitor. Odio facilisis mauris sit amet massa. Morbi tempus iaculis urna id volutpat. Phasellus egestas tellus rutrum tellus pellentesque. Quisque egestas diam in arcu cursus euismod. Semper feugiat nibh sed pulvinar proin gravida hendrerit. Condimentum lacinia quis vel eros donec ac odio tempor. Donec pretium vulputate sapien nec. Donec ultrices tincidunt arcu non sodales.
</p>
<p>
Ornare arcu dui vivamus arcu felis bibendum. Justo laoreet sit amet cursus. Posuere lorem ipsum dolor sit amet consectetur adipiscing elit duis. Urna et pharetra pharetra massa massa ultricies mi quis. Pellentesque adipiscing commodo elit at imperdiet dui. Sit amet mattis vulputate enim nulla aliquet porttitor lacus luctus. Sollicitudin nibh sit amet commodo nulla. Arcu bibendum at varius vel pharetra. Porttitor lacus luctus accumsan tortor posuere ac ut consequat. Turpis egestas maecenas pharetra convallis. Eget velit aliquet sagittis id consectetur purus ut. Posuere lorem ipsum dolor sit amet consectetur adipiscing. Ullamcorper dignissim cras tincidunt lobortis feugiat vivamus at augue eget. Curabitur gravida arcu ac tortor dignissim. Egestas congue quisque egestas diam. Auctor eu augue ut lectus arcu bibendum. Donec ultrices tincidunt arcu non sodales neque. Tincidunt arcu non sodales neque sodales ut etiam sit amet. Non quam lacus suspendisse faucibus interdum. Condimentum vitae sapien pellentesque habitant morbi tristique senectus.
</p>
</div>
</div>
Simple Table Sample
@page "/test-table"
<div id="table-container" class="mt-2" style="white-space: nowrap;">
<table class="table">
<thead>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
<td>Five</td>
<td>Six</td>
<td>Seven</td>
<td>Eight</td>
</tr>
</thead>
<tbody>
<tr>
<td>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae nunc sed velit dignissim sodales ut eu sem. Imperdiet dui accumsan sit amet nulla. Vestibulum lectus mauris ultrices eros in cursus turpis massa tincidunt. Elit duis tristique sollicitudin nibh sit amet commodo nulla facilisi. Congue quisque egestas diam in arcu cursus. Mattis nunc sed blandit libero volutpat sed cras ornare. Vitae congue mauris rhoncus aenean vel elit scelerisque. Pellentesque diam volutpat commodo sed egestas. Vitae tempus quam pellentesque nec. Egestas sed sed risus pretium.
</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
<td>
03cc6a8e-951b-11ee-b9d1-0242ac120002
</td>
<td>
083e7c1a-951b-11ee-b9d1-0242ac120002
</td>
<td>
499b9247-69de-4bd6-8650-d18b31e3d33f
</td>
<td>
098e82e3-0bbf-4f00-804e-caf401d06e14
</td>
</tr>
<tr>
<td>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae nunc sed velit dignissim sodales ut eu sem. Imperdiet dui accumsan sit amet nulla. Vestibulum lectus mauris ultrices eros in cursus turpis massa tincidunt. Elit duis tristique sollicitudin nibh sit amet commodo nulla facilisi. Congue quisque egestas diam in arcu cursus. Mattis nunc sed blandit libero volutpat sed cras ornare. Vitae congue mauris rhoncus aenean vel elit scelerisque. Pellentesque diam volutpat commodo sed egestas. Vitae tempus quam pellentesque nec. Egestas sed sed risus pretium.
</td>
<td>Two</td>
<td>Three</td>
<td>Four</td>
<td>
03cc6a8e-951b-11ee-b9d1-0242ac120002
</td>
<td>
083e7c1a-951b-11ee-b9d1-0242ac120002
</td>
<td>
499b9247-69de-4bd6-8650-d18b31e3d33f
</td>
<td>
098e82e3-0bbf-4f00-804e-caf401d06e14
</td>
</tr>
</tbody>
</table>
</div>