Question

当存在flex容器时，我遇到white-space:nowrap的问题。

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空间自动调整。但是因为我在overflow-x:hidden;上设置了container所以没有水平滚动，因为右边的屏幕会被切割，内容不可见。

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

以下是代码：

＆＃13;

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

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

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

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

谢谢！

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

Answer 1

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

white-space css属性正在创建flex问题

1 个答案: