Почему текст скролится вбок а не вниз?

Question

[Elrock]

Ставлю overflow: auto, ползунок идет слева на право

*{
   margin: 0;
   padding: 0;
}
body{
   background-color: #a840ff;
}
ul{
   list-style-type: none;
}
.wrapper{
   display: flex;   
   justify-content: center;
   flex-direction: column;
   align-items: center;
   max-width: 1280px;
   margin: 0 auto;
   -webkit-box-flex: 0;
}
.title{
   text-align: center;
}
.todo-btn__delete{
   padding: 2px 20px;
   background-color: rgba(255, 0, 0, 0.603);
   border: 0px;
   color: white;
}
ul li{
   margin: 10px;
}
.todo__input{
   padding: 12px 20px;
   margin-bottom: 30px;
   border-radius: 20px;
   font-size: 100%;
}
.new-todo{
   position: relative;
   width: 200px;
   height: 50px;
   background-color: #eee;
   overflow: visible;
}

<ul className="todo-list">
  <li className="new-todo">
    <p>fsafdsfsafdsfsafdsfsafdsfsafdsfsafdsfsafdsfsafdsfsafdsfsafdsfsafdsfsafdsfsafds</p>
  </li>
</ul>

Answer 1

[Сергей Романенко]

для .new-todo добавьте

.new-todo {
    overflow-wrap: break-word;
}

https://jsfiddle.net/0pvqt4f8/