flex-box column overflowing parent container

Question

I am having a difficult time getting a flex-box (direction = "column") to wrap rather than overflow a parent container.

As seen in the code below (or linked codepen), the general scheme is thus: the flexbox's parent is set to flex-grow = "1", within another flexbox set to flex = "column" (height = "100%), within a flex-box set to height = "200px" (the height at which I want to wrap at, rather than overflow). Any help is greatly appreciated.

https://codepen.io/mvolny/pen/ZErbwGy (purple box pushing green box outside of parent rather than wrapping and staying within the red box)

.about-me-flex {
  display: flex;
  width: 100%;
  height: 200px;
  border: 1px solid pink;
}

.intro-and-skills-flex {
  display: flex;
  flex-direction: column;
  width: 60%;
  border: 1px solid red;
  height: 100%;
}

.about-me-intro {
  border: 1px solid grey;
}

.skills {
  flex-grow: 1;
  border: solid green 1px;
}

.listed-skills-flex {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  border: 1px solid purple;
  list-style-type: square;
  padding-left: 20px;
  margin-left: 0;
}

<div class="about-me-flex">
  <div class="intro-and-skills-flex">
    <div class="about-me-intro">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
    <div class="skills">
      <div>Things I know</div>
      <ul class="listed-skills-flex">
        <li>Javascript</li>
        <li>HTML/CSS</li>
        <li>Node.js</li>
        <li>React</li>
        <li>Redux</li>
        <li>PostgreSQL</li>
        <li>MongoDB</li>
      </ul>
    </div>
  </div>
  <div class="profile-image-container">
    <!-- <img src="./assets/scooter-muppet.png" alt="" /> -->
  </div>
</div>

Answer 1

if you want the whole .listed-skills-flex to wrap you should put flex-wrap: wrap; directly to its parent;

.intro-and-skills-flex {
    ...
    flex-wrap: wrap;
}

and if you want only the content of listed-skills-flex to warp just add height or max-height to listed-skills-flex

.listed-skills-flex {
   height: 100px;
}

or

.listed-skills-flex {
max-height: 100px;
}