Flexbox exercises question

[favnum]

Why does this exercise default to align-items: stretch;?

[favnum]

This is what it looks like when I set align-items to something else

[JeremyLT]

Please include a link to the challenge. Also, please copy-paste your actual code into a post rather than using a screenshot.

[favnum]

Here’s the challenge: https://www.freecodecamp.org/learn/responsive-web-design/css-flexbox/align-elements-using-the-align-items-property

And here’s the code:

  #box-container {
    background: gray;
    display: flex;
    height: 500px;
    align-items: flex-end;
  }
  #box-1 {
    background-color: dodgerblue;
    width: 200px;
    font-size: 24px;
  }

  #box-2 {
    background-color: orangered;
    width: 200px;
    font-size: 18px;
  }
</style>

<div id="box-container">
  <div id="box-1"><p>Hello</p></div>
  <div id="box-2"><p>Goodbye</p></div>
</div>```

[jetp4cker]

Each property in CSS has a default value that is used if the property has not been explicitly defined. If flexbox is being used and no alignment has been specified, align-items defaults to a value of stretch.