在 CSS 中使用 Overflow-X 时如何防止元素换行？答案

【问题标题】：How do I prevent elements from wrapping while using Overflow-X in CSS?在 CSS 中使用 Overflow-X 时如何防止元素换行？
【发布时间】：2021-07-14 04:00:23
【问题描述】：

HTML

<nav class="m-tabs horizontal-scroll p-0 nav card-header-tabs nav-tabs" role="tablist">
  <a id="community-tabs-tab-discussion" href="#" role="tab" data-rb-event-key="discussion" aria- 
  controls="community-tabs-tabpane-discussion" aria-selected="true" class="nav-item nav-link 
  active">Discussion</a>
  <a id="community-tabs-tab-about" href="#" role="tab" data-rb-event-key="about" aria- 
  controls="community-tabs-tabpane-about" aria-selected="false" class="nav-item nav-link" 
  tabindex="-1">About</a>
  <a id="community-tabs-tab-members" href="#" role="tab" data-rb-event-key="members" aria- 
  controls="community-tabs-tabpane-members" tabindex="-1" aria-selected="false" class="nav-item 
  nav-link">Members</a>
  <a id="community-tabs-tab-events" href="#" role="tab" data-rb-event-key="events" aria- 
  controls="community-tabs-tabpane-events" tabindex="-1" aria-selected="false" class="nav-item 
  nav-link">Events</a>
</nav>

CSS

.horizontal-scroll {
  overflow-x: auto;
  width: 200px;
  position:relative;
  white-space: nowrap;/*using nowrap*/
}

与其将每个选项卡保持内联并添加一个水平 scoll，不如将它们包裹起来并添加一个垂直滚动：

我也尝试将其更改为 'overflow-x: scroll'，但也没有用。

【问题讨论】：

考虑使用display: flex;。
我被特别指示添加一个水平滚动条
@Waseem flex 不允许滚动。
如何将标签的宽度设置为每个 30%？
不错的主意，但这是为了分配，我只能更改包含选项卡的 div。我被指示添加一个水平滚动条，仅此而已。

标签： javascript html css reactjs react-bootstrap

【解决方案1】：

添加这个解决了问题

flex-wrap: nowrap;

【讨论】：