Элементы в неупорядоченном списке не занимают 100% ширины своего родительского контейнера.

Question

У меня странная проблема, когда дочерние элементы неупорядоченного списка не растягиваются, чтобы занять 100% ширины своих родителей, когда их родитель имеет фиксированное значение с overflow: scroll.

При наведении курсора на гиперссылку в списке эффект наведения не распространяется на весь текст.

Я не могу позволить тексту перейти на следующую строку.

Некоторое время я бился головой об стену. Есть идеи?

Вот мой HTML:

    <div class="container">
      <ul>
        <li><a href="#">Test Link with a long name that stretches the container</a></li>
        <li><a href="#">Test Link with a long name that stretches the container</a></li>
        <li><a href="#">Test Link with a long name that stretches the container</a>
      </ul>
    </div>

И мой CSS:

    .container{
      display: flex;
      flex-direction: column;
      height: 100%;
      width: 250px;
      background: black;
      color: white;
      overflow: scroll;

      ul{
        list-style: none;
        margin-left: 0;
        padding-left: 0;
      }
    }

    a{
      display: inline-block;
      color: white;
      text-decoration: none;
      white-space: nowrap;
      clear:both;
      padding: 15px;
      position: relative;
      width: 100%;

      &:hover{
        background: white;
        color: black;
      }
    }

И ссылка на кодовый блок, демонстрирующий проблему

Спасибо!

Answer 1

Вам необходимо удалить следующие два правила: white-space: nowrap; width: 100%; из a. Пробел будет блокировать текст, чтобы разбить его на новую строку, ширина будет составлять тег a, пока контейнер равен 250px - scrollbar if there is.

.container{
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 250px;
  background: black;
  color: white;
  overflow-y: scroll;
}
.container ul{
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}

a{
  display: inline-block;
  color: white;
  text-decoration: none;
  clear:both;
  padding: 15px;
  position: relative;
}
a:hover{
  background: white;
  color: black;
}

<div class="container">
  <ul>
    <li><a href="#">Test Link with a long name that stretches the container</a></li>
    <li><a href="#">Test Link with a long name that stretches the container</a></li>
    <li><a href="#">Test Link with a long name that stretches the container</a>
      <ul>
        <li><a href="#" style="padding-left: 30px;">Test Link with a long name that stretches the container</a></li>
        <li><a href="#" style="padding-left: 30px;">Test Link with a long name that stretches the container</a>
          
          <ul>
        <li><a href="#" style="padding-left: 50px;">Test Link with a long name that stretches the container</a></li>
        <li><a href="#" style="padding-left: 50px;">Test Link with a long name that stretches the container</a></li>
      <li><a href="#" style="padding-left: 50px;">Test Link with a long name that stretches the container</a></li>
      </ul>
          
        </li>
      <li><a href="#" style="padding-left: 30px;">Test Link with a long name that stretches the container</a></li>
      </ul>
      
    </li>
    <li><a href="#">Test Link with a long name that stretches the container</a></li>
  </ul>
</div>

И я также изменил overflow на overflow-y, потому что нет смысла показывать свиток на оси x, если в любом случае невозможно прокрутить таким образом.

Answer 2

Просто измените стили на .container a. Измените display на block и удалите правило пробелов.

.container {
      display: flex;
      flex-direction: column;
      height: 100%;
      width: 250px;
      background: black;
      color: white;
      overflow: scroll;
}

.container ul {
        list-style: none;
        margin-left: 0;
        padding-left: 0;
}

.container a {
      display: block;
      color: white;
      text-decoration: none;
      clear:both;
      padding: 15px;
      position: relative;
      width: 100%;
}
.container a:hover {
        background: white;
        color: black;
}

<div class="container">
  <ul>
    <li><a href="#">Test Link with a long name that stretches the container</a></li>
    <li><a href="#">Test Link with a long name that stretches the container</a></li>
    <li><a href="#">Test Link with a long name that stretches the container</a>
  </ul>
</div>
    

Answer 3

Удалить width: 100% из элемента a.Все остальное в порядке.Ширина 100% подразумевает 250px в вашем случае.

.container {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 250px;
  background: black;
  color: white;
  overflow: scroll;
}

.container ul {
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}

a {
  display: inline-block;
  color: white;
  text-decoration: none;
  white-space: nowrap;
  clear: both;
  padding: 15px;
  position: relative;
  /* width: 100%; */
}

a:hover {
  background: white;
  color: black;
}

<div class="container">
  <ul>
    <li><a href="#">Test Link with a long name that stretches the container</a></li>
    <li><a href="#">Test Link with a long name that stretches the container</a></li>
    <li><a href="#">Test Link with a long name that stretches the container</a>
  </ul>
</div>

Answer 4

Добавление ширины 100% в ul должно работать.