Flex is Weird or I'm Stupid ?

Here i have an html :

 <aside>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Product</a></li>
        <li><a href="#">Support us</a></li>
        <li><a href="#">Exit</a></li>
      </ul>
    </aside>

css :

aside {
  min-height: 100vh;
  background: rgb(243, 77, 77);
  width: clamp(150px, 20%, 300px);
  padding-top: 10px;
  display: flex;
}

aside ul {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: start;
  width: 100%;
  gap: 100px;
  list-style: none;
}

when i remove display flex from the aside every list item just have small size to center and stuff but when i add it it works but i dident set a direction align items or so in the aside i just did flex could someone explain this to me ?

Comments

[Mykhailo Toporkov 🇺🇦]

Without display: flex; The <ul> behaves as a block-level element by default, taking up the full width of its parent (<aside>). The list items (<li>) will behave like normal block elements, stacking vertically, and will not stretch to fill any additional space unless explicitly told to