Home Flex Box items aren't taking up available space for their row and I don't know why. Codepen with example is included

Questions

Flex Box items aren't taking up available space for their row and I don't know why. Codepen with example is included

byMR

August 18, 2022

This is based on Challenge #2 from Keven Powell’s Conquering Responsive Design series.

The column on the right has a div that changes the flex direction to "column"; however, the items don’t expand to take up the available vertical space. The items have a limegreen border, but the vert-row div has an orange border. There is still available white space from the last flex-item.

I’ve tried adding "flex-grow", "align-self:stretch;" and other things to the ".vert__item" class, but nothing seems to be working like I understand.

If I change the padding and font-size on the .vert__item class from "rem" to "em", this makes the items expand, which leaves me completely confused.

Can someone explain why this works and/or provide a solution that doesn’t seem so random? It might not be random, but I don’t understand the correlation between these css properties and their effects that would lead to resolving an issue with flex-items using all of their available space.

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Roboto", sans-serif;
  font-size: 1.3rem;
}

img {
  max-width: 100%;
}

h1 {
  font-size: 3rem;
  margin-top: 0;
}

.container {
  width: 80%;
  max-width: 1100px;
  margin: 0 auto;
}

.row {
  /* display: flex => flex container */
  display: flex;
  justify-content: space-between;
  gap: 3em;
  border: 4px solid navy;
}

.vert-row {
  border: 4px solid orangered;
  justify-content: space-between;
  flex-direction: column;
  width: 40%;
  text-align: center;
  // height:100%; // Actually made the vertical row use less space
  align-items: stretch;
  // padding:1em;
}

.vert__item {
  border: 4px solid greenyellow;
  color: white;
  background-color: #136c72;
  padding: 1rem;
  align-self: stretch;
  font-size: 1rem; // changing this to em seems to have the items use all the space...but...maybe not
  flex-grow: 1; // shouldn't this work ?
}

.vert__item h1 {
  font-size: 1.3rem;
}

.quality_designs {
  width: 60%;
  text-align: left;
  border: 4px solid black;
}

.divider {
  margin-top: 2em;
}

.accent {
  color: #136c72;
}

.col {
  /* these are now flex items */
  width: 100%;
}

.col + .col {
  margin-left: 30px;
}

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Conquering Rsponsive Layouts</title>
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;900&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <section class="container divider">
    <div class="row">
      <div class="quality_designs">
        <h1 class="accent">Quality designs made custom, on demand, just for you</h1>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
        </p>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
        </p>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
        </p>
      </div>
      <div class="vert-row">
        <div class="vert__item">
          <h1>Cheap</h1>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
        </div>
        <div class="vert__item">
          <h1>Cheap</h1>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
        </div>
        <div class="vert__item">
          <h1>Cheap</h1>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
        </div>
      </div>
    </div>
  </section>

</body>

>Solution :

I don’t have access to the course your taking. But from your description you were very close!

You’ve added flex-direction: column to the correct div but just missed declaring it a display:flex as well. An element can’t use flex-direction unless it is also a flex-box.

Hope this helps!

Hot edit: Just to answer your question about rems and ems as well. Rems are based on the HTML root: font size (standard is 16px). Where ems are based on the container font size.
https://css-tricks.com/rems-ems/

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Roboto", sans-serif;
  font-size: 1.3rem;
}

img {
  max-width: 100%;
}

h1 {
  font-size: 3rem;
  margin-top: 0;
}

.container {
  width: 80%;
  max-width: 1100px;
  margin: 0 auto;
}

.row {
  /* display: flex => flex container */
  display: flex;
  justify-content: space-between;
  gap: 3em;
  border: 4px solid navy;
}

.vert-row {
  border: 4px solid orangered;
  justify-content: space-between;
  flex-direction: column;
  display:flex; ///This is what is needed
  width: 40%;
  text-align: center;
  // height:100%; // Actually made the vertical row use less space
  align-items: stretch;
  // padding:1em;
}

.vert__item {
  border: 4px solid greenyellow;
  color: white;
  background-color: #136c72;
  padding: 1rem;
  align-self: stretch;
  font-size: 1rem; // changing this to em seems to have the items use all the space...but...maybe not
  flex-grow: 1; // shouldn't this work ?
}

.vert__item h1 {
  font-size: 1.3rem;
}

.quality_designs {
  width: 60%;
  text-align: left;
  border: 4px solid black;
}

.divider {
  margin-top: 2em;
}

.accent {
  color: #136c72;
}

.col {
  /* these are now flex items */
  width: 100%;
}

.col + .col {
  margin-left: 30px;
}

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Conquering Rsponsive Layouts</title>
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;900&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <section class="container divider">
    <div class="row">
      <div class="quality_designs">
        <h1 class="accent">Quality designs made custom, on demand, just for you</h1>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
        </p>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
        </p>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
        </p>
      </div>
      <div class="vert-row">
        <div class="vert__item">
          <h1>Cheap</h1>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
        </div>
        <div class="vert__item">
          <h1>Cheap</h1>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
        </div>
        <div class="vert__item">
          <h1>Cheap</h1>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
        </div>
      </div>
    </div>
  </section>

</body>