空白的CSS属性正在创建flex的问题 [英] white-space css property is creating issues with flex

问题描述

有一个 white-space：nowrap flex container with flex-direction：row; 其中有两个div sidebar ，并使用 flex：0 0 70px; 和主内容设置了一定的宽度。在$ 主要内容中使用 flex-direction：column 两个主要的div， header 和 content 。



现在在内容中，有三个刀片它具有 flex-grow：1 。



每个刀片都有 long-content 空白：NOWRAP 。我希望所有的三个刀片都可以在屏幕上看到，它可以在 main-content 的空间自动调整。但是，因为我已经在容器上设置了 overflow-x：hidden; ，所以不会出现水平滚动，正确的屏幕得到削减，内容不可见。

我希望它可以在每个刀片的相同空间上进行调整。

以下是代码：

function expand（）{var sidebar = document.querySelector（ ）; sidebar.classList.add（sidebar - expanded）;}

button {max-width：60px; max-height：30px;}。container {display：flex; overflow-x：hidden;}。sidebar {background：red;身高：100vh;显示：flex; flex：0 0 70px;}。sidebar - expanded {flex：0 0 100px;}。main-content {display：flex; flex-direction：列; flex-grow：1;}。header {background：blue; flex-grow：1;显示：flex;白颜色; justify-content：flex-end; flex：0 0 30px;}。content {display：flex;白颜色;背景：蓝绿色; flex-grow：1; width：100％;}。long-content {overflow-x：auto; white-space：nowrap;}。blade {border：1px solid red;填充：5px; flex-grow：1;}

< div class = 容器 > < div class =sidebar> < button onclick =expand（）>侧栏< / button> < / DIV> < div class =main-content> < div class =header>标题< / div> < div class =content> < div class =blade> < div class =long-content>添加标题，使小提琴public.Add标题，使小提琴public.Add标题，使小提琴public.Add标题，使小提琴public.Add标题，使小提琴public.Add标题，使小提琴公共。添加标题使小提琴public.Add标题，使小提琴公开。添加标题，使小提琴public.Add标题，使小提琴public.Add标题，使小提琴public.Add标题，使小提琴public.Add标题，使小提琴大众。添加标题，使小提琴公开。添加标题，使小提琴公开。 < / DIV> < / DIV> < div class =blade> < div class =long-content>添加标题，使小提琴public.Add标题，使小提琴public.Add标题，使小提琴public.Add标题，使小提琴public.Add标题，使小提琴public.Add标题，使小提琴公共。添加标题使小提琴public.Add标题，使小提琴公开。添加标题，使小提琴public.Add标题，使小提琴public.Add标题，使小提琴public.Add标题，使小提琴public.Add标题，使小提琴大众。添加标题，使小提琴公开。添加标题，使小提琴公开。 < / DIV> < / DIV> < div class =blade> < div class =long-content>添加标题，使小提琴public.Add标题，使小提琴public.Add标题，使小提琴public.Add标题，使小提琴public.Add标题，使小提琴public.Add标题，使小提琴公共。添加标题使小提琴public.Add标题，使小提琴公开。添加标题，使小提琴public.Add标题，使小提琴public.Add标题，使小提琴public.Add标题，使小提琴public.Add标题，使小提琴大众。添加标题，使小提琴公开。添加标题，使小提琴公开。 < / DIV> < / DIV> < / DIV> < / div>< / div>

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



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

感谢!!

其他信息
其实，第二个是 main-content 的flex-item没有考虑它的兄弟节点的存在，它是 sidebar ，所以它将整个屏幕宽度视为唯一的项目。如果你想让它在屏幕上以每个刀片的相同空间进行调整，那么为什么要放置空白区域：nowrap。

。
从长内容中移除 white-space：nowrap ，它将在您的容器中自动调整，占用相同的空间。

I am facing issues with white-space:nowrap when there is flex container.

There is a flex container with flex-direction:row; in which there are two divs sidebar with certain width set using flex:0 0 70px; and the main-content.

In the main-content with flex-direction:column two main divs, header and the content.

Now in the content, there are three blade that has flex-grow:1.

Each blade has long-content that has set white-space:nowrap. I want all the three blades to be visible on the screen, that is adjust automatically in the space of main-content. But as I have set overflow-x:hidden; on the container so there will be no horizontal scroll due to this the right screen get cuts, that content is not visible.

I want it to adjust on the screen with equal space of each blade.

Here is the code:

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>

It's a little tough to explain the whole situation, so here is the JSFiddle.

I have tried all the CSS combination by applying different css rules but not able to achieve it? Please help.

Thanks!!

Additional Info Actually, the second flex-item that is main-content is not considering the existence of its sibling that is sidebar, so it takes whole screen width considering it as the only item.

解决方案

If you want it to adjust on the screen with equal space of each blade, then why you put white-space: nowrap.
Remove white-space: nowrap from the long content and it will automatically adjust within your container taking equal space.

这篇关于空白的CSS属性正在创建flex的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！