containers with same height having different positions-CodePudding

I have a wrapper with multiple containers inside it. Each container has a top and a bottom . The top contains a background image while the bottom contains text data. The container has a height of fit-content. My question is, every top has the same height but some of the top elements position are pushed up. Why is this happening? What I want is for all top to be positioned the same and then the bottom will stretch according to its content. How can I achieve this? Thanks in advance.

.dynamicVideoCon {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: fit-content;
  margin-bottom: 1.5%;
}

.dynamicVideoCon .dynamicVideoData {
  display: flex;
  flex-direction: column;
  width: 19%;
  height: 100%;
  margin: auto;
}

.dynamicVideoCon .dynamicVideoData .top {
  display: flex;
  top: 0%;
  width: 100%;
  height: 18vh;
}

.dynamicVideoCon .dynamicVideoData .top .videoCon {
  display: flex;
  width: 98%;
  height: 100%;
  margin: auto;
  background-color: #000000;
  background-repeat: no-repeat;
  background-size: cover;
}

.dynamicVideoCon .dynamicVideoData .top .videoCon:hover {
  filter: brightness(75%);
  cursor: pointer;
}

.dynamicVideoCon .dynamicVideoData .bottom {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: fit-content;
  margin-top: 1.2%;
}

.dynamicVideoCon .dynamicVideoData .bottom .metadata_title {
  display: flex;
  width: 100%;
  height: fit-content;
  padding-left: 3%;
}

.dynamicVideoCon .dynamicVideoData .bottom .metadata_title p {
  font-size: 0.9vw;
  font-weight: 500;
  color: #000000;
  margin-top: auto;
  margin-bottom: auto;
}

.dynamicVideoCon .dynamicVideoData .bottom .metadata_views_ago {
  display: flex;
  flex-direction: row;
  justify-content: left;
  column-gap: 2%;
  width: 100%;
  height: fit-content;
  padding-left: 3%;
}

.dynamicVideoCon .dynamicVideoData .bottom .metadata_views_ago p {
  font-size: 0.8vw;
  font-weight: 500;
  color: #ffffff;
  margin-top: auto;
  margin-bottom: auto;
}

.dynamicVideoCon .dynamicVideoData .bottom .metadata_views_ago i {
  font-size: 1vw;
  color: #ffffff;
  margin-top: auto;
  margin-bottom: auto;
}

<div  id="0">
  <div >
    <div >
      <div  style="background-image: url('https://img.youtube.com/vi/XlZlKiT1uZM/hqdefault.jpg')">
      </div>
    </div>
    <div >
      <div >
        <p>Hanging Out At Pokimanes House!</p>
      </div>
      <div >
        <p>1.5M views</p>
        <p>1 day ago</p>
      </div>
    </div>
  </div>
  <div >
    <div >
      <div  style="background-image: url('https://img.youtube.com/vi/Q5twKgxO8xg/hqdefault.jpg')">
      </div>
    </div>
    <div >
      <div >
        <p>JiDion Gets A Haircut At The Worlds Largest Tennis Match</p>
      </div>
      <div >
        <p>207K views</p>
        <p>3 days ago</p>
      </div>
    </div>
  </div>
  <div >
    <div >
      <div  style="background-image: url('https://img.youtube.com/vi/XdNoAcONMB4/hqdefault.jpg')">
      </div>
    </div>
    <div >
      <div >
        <p>JiDion Gives Away $10,000</p>
      </div>
      <div >
        <p>149K views</p>
        <p>7 days ago</p>
      </div>
    </div>
  </div>
  <div >
    <div >
      <div  style="background-image: url('https://img.youtube.com/vi/H-vqkCkBaOs/hqdefault.jpg')">
      </div>
    </div>
    <div >
      <div >
        <p>JiDion Simping For Valkyrae For 13 Minutes &amp; 10 Seconds</p>
      </div>
      <div >
        <p>231K views</p>
        <p>8 days ago</p>
      </div>
    </div>
  </div>
  <div >
    <div >
      <div  style="background-image: url('https://img.youtube.com/vi/XyCHANsiJrc/hqdefault.jpg')">
      </div>
    </div>
    <div >
      <div >
        <p>KSI Wants JiDion To Start Boxing?!</p>
      </div>
      <div >
        <p>384K views</p>
        <p>9 days ago</p>
      </div>
    </div>
  </div>
</div>

CodePudding user response：

It's not the same height, since some of them have text with two lines, which makes it taller.

You should change margin: auto; to margin: 0 auto; at:

.dynamicVideoCon .dynamicVideoData {...}

CodePudding user response：

You have to use just

.dynamicVideoCon .dynamicVideoData {
      margin:0 auto;
}

.dynamicVideoCon {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: fit-content;
  margin-bottom: 1.5%;
}

.dynamicVideoCon .dynamicVideoData {
  display: flex;
  flex-direction: column;
  width: 19%;
  height: 100%;
  margin:0 auto;
}

.dynamicVideoCon .dynamicVideoData .top {
  display: flex;
  top: 0%;
  width: 100%;
  height: 18vh;
}

.dynamicVideoCon .dynamicVideoData .top .videoCon {
  display: flex;
  width: 98%;
  height: 100%;
  margin: auto;
  background-color: #000000;
  background-repeat: no-repeat;
  background-size: cover;
}

.dynamicVideoCon .dynamicVideoData .top .videoCon:hover {
  filter: brightness(75%);
  cursor: pointer;
}

.dynamicVideoCon .dynamicVideoData .bottom {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: fit-content;
  margin-top: 1.2%;
}

.dynamicVideoCon .dynamicVideoData .bottom .metadata_title {
  display: flex;
  width: 100%;
  height: fit-content;
  padding-left: 3%;
}

.dynamicVideoCon .dynamicVideoData .bottom .metadata_title p {
  font-size: 0.9vw;
  font-weight: 500;
  color: #000000;
  margin-top: auto;
  margin-bottom: auto;
}

.dynamicVideoCon .dynamicVideoData .bottom .metadata_views_ago {
  display: flex;
  flex-direction: row;
  justify-content: left;
  column-gap: 2%;
  width: 100%;
  height: fit-content;
  padding-left: 3%;
}

.dynamicVideoCon .dynamicVideoData .bottom .metadata_views_ago p {
  font-size: 0.8vw;
  font-weight: 500;
  color: #ffffff;
  margin-top: auto;
  margin-bottom: auto;
}

.dynamicVideoCon .dynamicVideoData .bottom .metadata_views_ago i {
  font-size: 1vw;
  color: #ffffff;
  margin-top: auto;
  margin-bottom: auto;
}

<div  id="0">
  <div >
    <div >
      <div  style="background-image: url('https://img.youtube.com/vi/XlZlKiT1uZM/hqdefault.jpg')">
      </div>
    </div>
    <div >
      <div >
        <p>Hanging Out At Pokimanes House!</p>
      </div>
      <div >
        <p>1.5M views</p>
        <p>1 day ago</p>
      </div>
    </div>
  </div>
  <div >
    <div >
      <div  style="background-image: url('https://img.youtube.com/vi/Q5twKgxO8xg/hqdefault.jpg')">
      </div>
    </div>
    <div >
      <div >
        <p>JiDion Gets A Haircut At The Worlds Largest Tennis Match</p>
      </div>
      <div >
        <p>207K views</p>
        <p>3 days ago</p>
      </div>
    </div>
  </div>
  <div >
    <div >
      <div  style="background-image: url('https://img.youtube.com/vi/XdNoAcONMB4/hqdefault.jpg')">
      </div>
    </div>
    <div >
      <div >
        <p>JiDion Gives Away $10,000</p>
      </div>
      <div >
        <p>149K views</p>
        <p>7 days ago</p>
      </div>
    </div>
  </div>
  <div >
    <div >
      <div  style="background-image: url('https://img.youtube.com/vi/H-vqkCkBaOs/hqdefault.jpg')">
      </div>
    </div>
    <div >
      <div >
        <p>JiDion Simping For Valkyrae For 13 Minutes &amp; 10 Seconds</p>
      </div>
      <div >
        <p>231K views</p>
        <p>8 days ago</p>
      </div>
    </div>
  </div>
  <div >
    <div >
      <div  style="background-image: url('https://img.youtube.com/vi/XyCHANsiJrc/hqdefault.jpg')">
      </div>
    </div>
    <div >
      <div >
        <p>KSI Wants JiDion To Start Boxing?!</p>
      </div>
      <div >
        <p>384K views</p>
        <p>9 days ago</p>
      </div>
    </div>
  </div>
</div>