Flex Box items aren't taking up available space for their row and I don't know why. Codepe-CodePudding

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 >
    <div >
      <div >
        <h1 >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 >
        <div >
          <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 >
          <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 >
          <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>

CodePudding user response：

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 >
    <div >
      <div >
        <h1 >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 >
        <div >
          <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 >
          <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 >
          <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>

CodePudding user response：

flex-grow is worked, but you have not given parent container display:flex prop so to make flex-grow work the parent container should defined as flexbox so here you can checkout my snippet i have added display:flex to .vert-row class and also defined .vert-items as flexbox to make it's contain center of the box

*,
*::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 {
  display: flex;
  border: 4px solid orangered;
  flex-direction: column;
  width: 40%;
  text-align: center;
}

.vert__item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 4px solid greenyellow;
  color: white;
  background-color: #136c72;
  padding: 1rem;
  font-size: 1rem;
  flex-grow: 1; // shouldn't this work ? yes it worked
}

.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 >
    <div >
      <div >
        <h1 >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 >
        <div >
          <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 >
          <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 >
          <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>