Прокручиваемая вертикальная панель навигации в зависимости от содержимого

Question

У меня здесь вертикальная панель навигации. После некоторой помощи это все еще выглядит немного странно. Идея флексбокса хороша, но вся навигация уже во флексбоксе. Так что теперь он не выглядит полностью так, как должен. Почему текст переносится? А почему за рамкой есть текст?

Вот код:

.content {
display: flex;
}

.column {
height: 100vh;
background: darkgrey;
}

.column_content {
overflow-y: scroll;
height: 100%;
width: 100%;
padding: 10px;
}

nav {
border-left: 2px solid black;
-ms-writing-mode: tb-rl;
-webkit-writing-mode: vertical-rl;
writing-mode: vertical-rl;
}

nav ul {
display: flex;
flex-direction: row;
}

nav ul li {
margin-bottom: 20px;
}

<div class="content">

<div class="column">
<div class="column_content">
Text
</div>
</div>

<nav class="column">
<div class="column_content">
<ul>
<li>Link eins</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
</nav>

</div>

Спасибо за помощь! <3 </p>

Answer 1

Вы можете использовать flex-direction: row; для списка, и это будет держать список всегда на прокрутке.

body,
html {
  margin: 0;
  padding: 0;
  /*height: 800vh;*/
}

nav {
  float: right;
  border-left: 2px solid black;
  -ms-writing-mode: tb-rl;
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
  background: darkgrey;
}

ul {
  display: flex;
  /* use this */
  flex-direction: row;
  /* use this */
}

nav li {
  float: left;
  margin-bottom: 20px;
}

<nav>
  <ul>
    <li>Link</li>
    <li>Link</li>
    <li>Link</li>
    <li>Link</li>
    <li>Link</li>
    <li>Link</li>
    <li>Link</li>
    <li>Link</li>
    <li>Link</li>
    <li>Link</li>
    <li>Link</li>
    <li>Link</li>
    <li>Link</li>
    <li>Link</li>
    <li>Link</li>
    <li>Link</li>
    <li>Link</li>
    <li>Link</li>
    <li>Link</li>
    <li>Link</li>
    <li>Link</li>
    <li>Link</li>
    <li>Link</li>
    <li>Link</li>
  </ul>
</nav>

Answer 2

Вы можете использовать display: flex в элементе <ul> для отображения элементов <li> в одной строке.

body {
  margin: 0;
  padding: 0;
}

nav {
  float: right;
  border-left: 2px solid black;
  background: darkgrey;
  height: 100vh;
  position: fixed;
  top: 0;
  right: 0;
}

nav {
  overflow-y: scroll;
}

ul {
  -ms-writing-mode: tb-rl;
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
  /* height: 800vh; */
  display: flex; /* Use Flexbox */
}

nav li {
  float: left;
  margin-bottom: 20px;
}

<p>Text</p>
<nav>
  <ul>
    <li>Link</li>
    <li>Link</li>
    <li>Link</li>
    <li>Link</li>
    <li>Link</li>
    <li>Link</li>
    <li>Link</li>
    <li>Link</li>
    <li>Link</li>
    <li>Link</li>
    <li>Link</li>
    <li>Link</li>
    <li>Link</li>
    <li>Link</li>
    <li>Link</li>
    <li>Link</li>
    <li>Link</li>
    <li>Link</li>
    <li>Link</li>
    <li>Link</li>
    <li>Link</li>
    <li>Link</li>
    <li>Link</li>
    <li>Link</li>
  </ul>
</nav>