Горизонтально-прокручиваемый div внутри гибкой колонны

Question

У меня не может быть горизонтальной прокрутки внутри гибкого столбца.

Codepen

.container { display: flex; margin: 20px; height: 300px; border: 1px solid blue; }
.side-nav { flex-shrink: 0; width: 100px; min-height: 100%; background: grey; }
.main { padding: 20px; }

.scrollable { overflow-x: auto; max-width: 100%; }
.long-content { width: 2000px; height: 50px; background: red; }

<div class='container'>
  <div class='side-nav'>
  </div>
  <div class='main'>
    <h1>Test</h1>
    
    <div class='scrollable'>
      <div class='long-content'>
        This is supposed to scroll horizontally unless your window is super wide
      </div>
    </div>
    
    <p>Some paragraph below the scrollable box</p>
  </div>
</div>

Если я изменю max-width из .scrollable на px, это будет работать, но мне нужно заполнить столбец.

Чего мне не хватает?

Answer 1

На мой взгляд, это модуль "ошибка" (Wierd). В любом случае, одно очень простое решение - использовать flex-basis (вместо width).

Шаг 1 для main add width: 0;

.container { 
  display: flex; 
  margin: 20px; 
  height: 300px; 
  border: 1px solid blue; 
}
.side-nav { flex-shrink: 0; width: 100px; min-height: 100%; background: grey; }
.main { 
  padding: 20px; 
  border: 5px dashed orange; 
  /* "new code" */
  width: 0px;
}

.scrollable { overflow-x: auto; max-width: 100%; }
.long-content { width: 2000px; height: 50px; background: red; }

<div class='container'>
  <aside class='side-nav'>
    Aside
  </aside>
  <main class='main'>
    <h1>Test</h1>
    <div class='scrollable'>
      <div class='long-content'>
        This is supposed to scroll horizontally unless your window is super wide
      </div>
    </div>
    
    <p>Some paragraph below the scrollable box</p>
  </main>
</div>

Шаг 2 - main add flex-basis: 100%;

.container { 
  display: flex; 
  margin: 20px; 
  height: 300px; 
  border: 1px solid blue; 
}
.side-nav { flex-shrink: 0; width: 100px; min-height: 100%; background: grey; }
.main { 
  padding: 20px; 
  border: 5px dashed orange; 
  /* "new code" */
  width: 0px;
  flex-basis: 100%;
}

.scrollable { overflow-x: auto; max-width: 100%; }
.long-content { width: 2000px; height: 50px; background: red; }

<div class='container'>
  <aside class='side-nav'>
    Aside
  </aside>
  <main class='main'>
    <h1>Test</h1>
    <div class='scrollable'>
      <div class='long-content'>
        This is supposed to scroll horizontally unless your window is super wide
      </div>
    </div>

    <p>Some paragraph below the scrollable box</p>
  </main>
</div>

Еще один вариант - использовать width: 0; & flex-grow:1

.container { 
  display: flex; 
  margin: 20px; 
  height: 300px; 
  border: 1px solid blue; 
}
.side-nav { flex-shrink: 0; width: 100px; min-height: 100%; background: grey; }
.main { 
  padding: 20px; 
  border: 5px dashed orange; 
  /* "new code" */
  width: 0px;
  flex-grow: 1;
}

.scrollable { overflow-x: auto; max-width: 100%; }
.long-content { width: 2000px; height: 50px; background: red; }

<div class='container'>
  <aside class='side-nav'>
    Aside
  </aside>
  <main class='main'>
    <h1>Test</h1>
    <div class='scrollable'>
      <div class='long-content'>
        This is supposed to scroll horizontally unless your window is super wide
      </div>
    </div>

    <p>Some paragraph below the scrollable box</p>
  </main>
</div>

Мне не нравятся эти идеи, но это жизнь, чч.