Adding a scrolling text box to an <aside> in a flex layout

Question

Hope the title makes sense, this is my first post here. I've been getting back into website making lately, and I want to add a "concert log" to the sidebar of my website underneath a section of gifs. Ideally I want the "box" the list is in to be a set height and for the text to overflow automatically so that there's a scrollbar. Surely I'm doing something wrong because instead of the overflow:auto; having an effect, it just expands with the page.

If it makes more sense to just inspect element my site it's here.

Here's the HTML:

<div id="flex"> 
  <aside id="sidebar">

        <div>
          <img class="gif" src="x.gif">
        </div>

          <div id="concertLog">
            <p> Concert Log </p>
              <ul id="concertText">
                <li> 7/17/23: LS Dunes - NYC </li>
                <li> 6/23/23: Thursday - SATX </li>
                <li> 5/23/23: Pierce the Veil - Austin </li>
                <li> 1/14/23: The Sound of Animals Fighting- SATX </li>
                <li> 9/17/22: iDKHOW - SATX </li>
                <li> 8/21/22: My Chemical Romance - SATX </li>
              </ul>
          </div>
  </aside>

And here is the CSS for this section:

#concertLog {
  font-family:serif;
  color:white;
  overflow:auto;
  border:white 1px; /*this doesn't do anything*/
  background-color:black;
}

/*Concert Text is something I was trying out but it doesn't really do anything*/
#concertText{
  padding:5px;
}

#flex {
  display:flex;
}
#sidebar {
  background:#F44336;
  width:200px;
}
.gif {
  display:block;
  background:#F44336;
  margin-left: auto;
  margin-right: auto;
  margin-bottom:2px;
  width:95%;
} 

I tried applying different height settings to #concertLog that took no effect. I tried applying the #concertText ID to the and adding padding just to see if it had any effect at all which it didn't.

Answer 1

I inspect your code and try this. then let me know. Add multiple li so you can see the overflow. set a height and try to use overflow-y: scroll instead.

#concertLog {
    font-family: serif;
    color: white;
    overflow-y: scroll;
    border: white 1px;
    background-color: black;
    height: 100px;/** sample height**/
}

<aside id="sidebar">

        <div>
          <img class="gif" src="selfishmachines.gif">
          <img class="gif" src="mcrBanner.webp">
          <img class="gif" src="demoloversmcr.gif">
          <img class="gif" src="frerardGif.gif">
        </div>
          <div id="concertLog">
            <p> Concert Log </p>
              <ul id="concertText">
                <li> 7/17/23: LS Dunes - NYC </li>
                <li> 6/23/23: Thursday - SATX </li>
                <li> 5/23/23: Pierce the Veil - Austin </li>
                <li> 1/14/23: The Sound of Animals Fighting- SATX </li>
                <li> 9/17/22: iDKHOW - SATX </li>
                <li> 8/21/22: My Chemical Romance - SATX </li>
              </ul>
          </div>
  </aside>