white-space css property is creating issues with flex [duplicate]

问题

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.

回答1:

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.

来源：https://stackoverflow.com/questions/49897730/white-space-css-property-is-creating-issues-with-flex

标签

html

css

css3

flexbox