Свойство white-space css создает проблемы с flex

Question

У меня проблемы с white-space:nowrap когда есть гибкий контейнер.

Есть изгиб container с flex-direction:row; в котором есть два div sidebar с определенной шириной, установленной с помощью flex:0 0 70px; и main-content,

в main-content с flex-direction:column два основных деления, header и content,

Сейчас в content, есть три blade который имеет flex-grow:1,

каждый blade имеет long-content что установило white-space:nowrap, Я хочу, чтобы все три лезвия были видны на экране, то есть автоматически настраивались в пространстве main-content, Но как я установил overflow-x:hidden; на container так что горизонтальной прокрутки не будет, потому что правый экран обрезается, контент не виден.

Я хочу, чтобы это настроить на экране с равным пространством каждого лезвия.

Вот код:

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, но не смог этого добиться? Пожалуйста помоги.

Спасибо!!

Дополнительная информация На самом деле, второй flex-элемент, который main-content не рассматривает существование своего родного брата, то есть sidebar, поэтому он занимает всю ширину экрана, считая его единственным элементом.

Answer 1

Если вы хотите, чтобы он корректировался на экране с равным пространством каждого лезвия, то почему вы ставите пробел: nowrap.
Удалить white-space: nowrap из длинного контента, и он будет автоматически корректироваться в вашем контейнере, занимая равное пространство.