[SOLVED] Flexbox item not shrinking. Beginner

Flexbox item not shrinking. Beginner

I have two jpegs inside a flex container "header", images are stacked vertically, the top image is square, the bottom is a long horizontal rectangle.

I want the bottom image to shrink with window re-sizing.

I can't get it to work, having tried many solutions here in stack flow.

This is my first stack overflow post so please forgive me.

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Clear Cut Legal Video</title>
    <link rel="stylesheet" type="text/css" href="styles/stylesheet.css">
  </head>
  <body>
    <div class="header">
      <img src="images/CCLV.jpeg"
           alt="Clear Cut Legal Logo">
      <img id="tagline"
           src="images/CCLV-tag-line.jpg"
           alt="Clear Cut Legal Tag Line">
    </div>
  </body>
</html>

.header  {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-flow: column nowrap;
}

Solution

You can set the width and height properties for the images inside the .header class to make them flexible

.header {
   display: flex;
   flex-direction: column;
}

.header img {
   width: 100%;
   height: auto;
}

Here's a codepen