white-space css property is creating issues with flex

Question

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.

There must be rule if you are downvoting the question , you should have to add reason for that — Sunil Garg, Apr 18 '18 at 11:10
That's been suggested but shot down **every time**...but with your rep you should know about posting code **in the question**. — Paulie_D, Apr 18 '18 at 11:11
Add `min-width: 0` to both `.main-content` and `.blade`. Explanation is in the duplicate. https://jsfiddle.net/4k1qsm1y/58/ — Michael Benjamin, Apr 19 '18 at 14:53
@Michael_B this solved the issue. but the same problem is with the height. setting min-height is not working but — Sunil Garg, Apr 20 '18 at 06:35

score 1 · Answer 1 · answered Apr 18 '18 at 16:06

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.

answered Apr 18 '18 at 16:06

Pranab

305
3
13

actually in real scnario there would be table so i dont want to wrap the content.. i have added `overflow-x:auto` it should work properly – Sunil Garg Apr 18 '18 at 17:09
OK then fine... But I don't see that how it work properly. You already use overlfow-x: auto, when you asking that question. – Pranab Apr 18 '18 at 18:05
yes.. but if you set the width of main-content less than the sidebar width it works like less than 90% - so it could be 80%,70% then it works – Sunil Garg Apr 18 '18 at 18:13

white-space css property is creating issues with flex

1 Answers1

Linked