Why is flex-direction: row rendering items in a column?

Question

Hope someone can shed light on this question of mine.

I have a flex container, which has 2 flex containers with flex-direction: column.

However, it all displays in 1 column.

Initially, it displayed in 2 columns but did not start at the same height, and now it is in one column only.

Advise here will be appreciated.

<!-- ***** finding container ***** -->

section.finding-container {
  top: 180px;
  display: flex;
  flex-direction: row;
  position: absolute;
  justify-content: space-between;
  align-items: center;
  /* height: 100% */
  /* margin-right: 215px; */
}

.find-agent {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 350px;
  margin-bottom: auto;
  margin-left: 50px;
}

.find-agent img,
h1,
p,
button {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.find-agent h1 {
  font-weight: 550;
  color: #1E95EE;
  text-align: center;
  margin-top: 12px;
  margin-bottom: 0;
}

.find-agent p {
  color: #3A3C3E;
  font-weight: 350;
  width: 445px;
  height: 71px;
  text-align: center;
  opacity: 1;
}

.try {
  border: 2px solid #1E95EE;
  border-radius: 5px;
  opacity: 1;
  color: #1E95EE;
  font-size: 18px;
  font-weight: Regular;
  height: 50px;
  width: 143px;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  justify-content: center;
}

.agent-profiles {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 0;
  margin-bottom: auto;
}

.agent-profiles h2,
img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.agent-profiles h2 {
  font-weight: 350;
  color: #1E95EE;
  text-align: center;
  width: 182px;
  height: 44px;
  letter-spacing: 0;
  opacity: 1;
}

```

<!-- ***** finding container ***** -->
<section class="finding-container">
  <div class="find-agent">
    <img src="./images/search.svg" alt="search">
    <h1>Find the perfect agent</h1>
    <p>
      No more browsing through thousands of applications. Each week, we'll send you a fresh batch of hand-picked, personally-vetted candidates.
    </p>
    <button type="button" class="try">Try today</button>
  </div>

  <div class="agent-profiles">
    <h2>
      Selections from the Overpass Marketplace
    </h2>
    <img src="./images/profiles.svg" alt="profiles">
  </div>

</section>

Michael Benjamin · Accepted Answer · 2020-01-08T04:16:39.053

I have a flex container, which has 2 flex containers with flex-direction: column.

You've got an invalid comment in your CSS, which is breaking your first line of code:

<!-- ***** finding container ***** -->

section.finding-container {
  top: 180px;
  display: flex;
  flex-direction: row;
  position: absolute;
  justify-content:space-between;
  align-items: center;
  /* height: 100% */
  /* margin-right: 215px; */
}

That's HTML commenting syntax. In CSS, it's invalid, so the following section.finding-container selector is seen as an error and ignored. The container then falls back to its default layout model, display: block, which stacks child elements vertically. (You can see the proper CSS commenting syntax at the bottom of your rule.)

More details about CSS commenting syntax and error handling:

Why are some of my CSS rules not working?

Initially, it displayed in 2 columns but did not start at the same height ...

You've got all sorts of margins and alignment properties (such as justify-content) set on the items and container, so they're rendering at different heights.

section.finding-container {
  /* top: 180px; */
  display: flex;
  flex-direction: row;
  position: absolute;
  justify-content: space-between;
  /* align-items: center; */
  border: 2px dashed red; /* for illustration purposes */
  padding: 10px; /* for illustration purposes */

}

.find-agent {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* margin-top: 350px; */
  /* margin-bottom: auto; */
  /* margin-left: 50px; */
  border: 1px solid green; /* for illustration purposes */  
}

.find-agent img,
h1,
p,
button {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.find-agent h1 {
  font-weight: 550;
  color: #1E95EE;
  text-align: center;
  margin-top: 12px;
  margin-bottom: 0;
}

.find-agent p {
  color: #3A3C3E;
  font-weight: 350;
  width: 445px;
  height: 71px;
  text-align: center;
  opacity: 1;
}

.try {
  border: 2px solid #1E95EE;
  border-radius: 5px;
  opacity: 1;
  color: #1E95EE;
  font-size: 18px;
  font-weight: Regular;
  height: 50px;
  width: 143px;

  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  justify-content: center;
}

.agent-profiles {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 0;
  /* margin-bottom: auto; */
  border: 1px solid black; /* for illustration purposes */    

}

.agent-profiles h2,
img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.agent-profiles h2 {
  font-weight: 350;
  color: #1E95EE;
  text-align: center;
  width: 182px;
  height: 44px;
  letter-spacing: 0;
  opacity: 1;

}

<section class="finding-container">
  <div class="find-agent">
    <img src="./images/search.svg" alt="search">
    <h1>Find the perfect agent</h1>
    <p>
      No more browsing through thousands of applications.
      Each week, we'll send you a fresh batch of hand-picked,
      personally-vetted candidates.
    </p>
    <button type="button" class="try">Try today</button>
  </div>
  <div class="agent-profiles">
    <h2>
      Selections from the
      Overpass Marketplace
    </h2>
    <img src="./images/profiles.svg" alt="profiles">
  </div>
</section>

Why is flex-direction: row rendering items in a column?

1 Answers1