Почему блок не хочет расширяться?

Question

[Роман Тузов]

Блок стоит на определённой ширине почему-то. Текст перенёсся вправо, значит и сзади должен заркаситься фон в белый. Ну в общем по коду понятней в чём проблема. https://codepen.io/HutsonR/pen/NWPzWro

Answer 1

[Egor]

.submenu {
position: relative;
}

И двоеточие забыл поставить

Comments

[Роман Тузов]

absolute убирать нельзя, т.к. это у меня подменю и оно будет накладываться на основное и полностью всё сбивать. В общем нужно другое решение.

[Egor]

Hutson, Ну тогда ниже ответ дан
width: 100%
и все будет ок

[Роман Тузов]

Egor Ermolaev, он будет слишком большим, на весь экран, он не ограничивается

[Egor]

Hutson, а что ты хотел? У тебя position:absolute, внутри которой relative. С такими параметрами, все равно не будет так, как тебе нужно. Почитай о позиционировании, при абсолютном другие элементы на странице «не видят» блок с позицией абсолют. Меняй на relative, а подменю абсолютом делай и будет тебе счастье

[Роман Тузов]

Egor Ermolaev, понял мысль, спасибо, получается наоборот, подменю релатив, а меню абсолютом

[Egor]

Hutson, верно, если помогло - отметь решением)

Answer 2

[Pavstyuk]

Вопрос был: "почему блок не хочет расширяться?" Ответ находится здесь:

max-width 300px; // потому что ширина ограничена свойством max-width
	max-height: 290px; // высота, кстати, тоже ограничена

Comments

[Роман Тузов]

Она же правильно ограничена, до 300px ещё есть место и там можно расширится

[Pavstyuk]

Да, точно. Не учел это. Вот так, кажется, будет работать лучше.

.submenu {
  background: #fff;
  position: absolute;
  top: 0;
  left: 0;
  width: 300px;
  height: 290px;
  border-radius: 3px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
}
.submenu li a {
  line-height: 30px;
  padding: 0;
  color: #111;
  font-weight: 500;
}
.submenu li {
  list-style: none;
}