空白 css 属性正在创建 flex 问题 [重复]

Question

当有弹性容器时，我遇到了white-space:nowrap 的问题。

有一个 flex container 和 flex-direction:row;，其中有两个 div sidebar 使用 flex:0 0 70px; 和 main-content 设置一定的宽度。

在main-content 和flex-direction:column 两个主要div 中，header 和content。

现在在content 中，有三个blade 具有flex-grow:1。

每个blade 都有long-content 设置white-space:nowrap。我希望所有三个刀片都在屏幕上可见，即在main-content 的空间中自动调整。但是由于我在container 上设置了overflow-x:hidden;，因此不会出现水平滚动，因此右侧屏幕会被剪切，该内容不可见。

我希望它在屏幕上调整，每个刀片的空间相等。

代码如下：

function expand() {
  var sidebar = document.querySelector(".sidebar");
  sidebar.classList.add("sidebar--expanded");

}

button {
  max-width: 60px;
  max-height: 30px;
}

.container {
  display: flex;
  overflow-x: hidden;
}

.sidebar {
  background: red;
  height: 100vh;
  display: flex;
  flex: 0 0 70px;
}

.sidebar--expanded {
  flex: 0 0 100px;
}

.main-content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.header {
  background: blue;
  flex-grow: 1;
  display: flex;
  color: white;
  justify-content: flex-end;
  flex: 0 0 30px;
}

.content {
  display: flex;
  color: white;
  background: teal;
  flex-grow: 1;
  width: 100%;
}

.long-content {
  overflow-x: auto;
  white-space: nowrap;
}

.blade {
  border: 1px solid red;
  padding: 5px;
  flex-grow: 1;
}

<div class="container">
  <div class="sidebar">
    <button onclick="expand()">Sidebar</button>
  </div>
  <div class="main-content">
    <div class="header">
      header
    </div>
    <div class="content">
      <div class="blade">
        <div class="long-content">
          Add title to make the fiddle public.Add title to make the fiddle public.Add title to make the fiddle public.Add title to make the fiddle public.Add title to make the fiddle public.Add title to make the fiddle public.Add title to make the fiddle public.Add
          title to make the fiddle public.Add title to make the fiddle public.Add title to make the fiddle public.Add title to make the fiddle public.Add title to make the fiddle public.Add title to make the fiddle public.Add title to make the fiddle
          public.Add title to make the fiddle public.
        </div>
      </div>
      <div class="blade">
        <div class="long-content">
          Add title to make the fiddle public.Add title to make the fiddle public.Add title to make the fiddle public.Add title to make the fiddle public.Add title to make the fiddle public.Add title to make the fiddle public.Add title to make the fiddle public.Add
          title to make the fiddle public.Add title to make the fiddle public.Add title to make the fiddle public.Add title to make the fiddle public.Add title to make the fiddle public.Add title to make the fiddle public.Add title to make the fiddle
          public.Add title to make the fiddle public.
        </div>
      </div>
      <div class="blade">
        <div class="long-content">
          Add title to make the fiddle public.Add title to make the fiddle public.Add title to make the fiddle public.Add title to make the fiddle public.Add title to make the fiddle public.Add title to make the fiddle public.Add title to make the fiddle public.Add
          title to make the fiddle public.Add title to make the fiddle public.Add title to make the fiddle public.Add title to make the fiddle public.Add title to make the fiddle public.Add title to make the fiddle public.Add title to make the fiddle
          public.Add title to make the fiddle public.
        </div>
      </div>
    </div>
  </div>
</div>

解释整个情况有点困难，所以这里是JSFiddle。

我通过应用不同的 css 规则尝试了所有的 CSS 组合，但无法实现？请帮忙。

谢谢！！

其他信息 实际上，第二个弹性项目main-content 并没有考虑其兄弟sidebar 的存在，因此它将整个屏幕宽度视为唯一的项目。

Answer 1

如果您希望它在屏幕上调整每个刀片的相等空间，那么为什么要放置 white-space: nowrap。
从长内容中删除white-space: nowrap，它将在您的容器内自动调整，占用相等的空间。