Search code examples
javascripthtmlcssflexbox

Why display:inline-flex Make the window horizontally scrollable?

I want that cards moves from right to left with same height and width as shown in picture which works fine but i am getting window horizontally scrollable which i don't want. When i am putting width:100% the card width reduced which i don't want. when the number of cards is less everything works fine but not with no of cards increases. So please help me to get this work as i want.

Like cards should be the same height and width as shown in picture without horizontally scrollable window

enter image description here

.main-ind-card {
  box-sizing: border-box;
  display:inline-flex;
  flex-direction: row;



  /*align-content : flex-start;*/
  /*!*max-width: fit-content;*!*/
  /*align-items: flex-start;*/

   overflow-x:hidden; 
   align-items: stretch;


}


.ind-card {
  width: 280px;
  height: 150px;
  max-width:100%;

  background: rgb(17, 4, 134);
  border-radius: 15px;
  box-shadow: rgb(0,0,0,0.7) 5px 10px 50px ,rgb(0,0,0,0.7) -5px 0px 250px;
  /*display: flex;*/

  color: white;
  justify-content: center;
  position: relative;
  flex-direction: row;
  align-items: center;
  background: linear-gradient(to right, rgb(20, 30, 48), rgb(36, 59, 85));
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  overflow: hidden;
  margin-left:20px;
  box-sizing: border-box;

  animation: ind-card 8s infinite linear;
margin-right:auto;



}


@keyframes ind-card {
  0% {
    transform: translateX(0px)
  }
  33.333% {
    transform: translateX(-200px)
  }
  66.666% {
    transform: translateX(-400px)
  }
  99.999% {
    transform: translateX(-600px)
  }
  100% {
    transform: translateX(0px)
  }
}




.ind-card:hover {
  box-shadow: rgb(0,0,0) 5px 10px 50px ,rgb(0,0,0) -5px 0px 250px;



}

.top {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-block-end: .5rem;
}

.pfp {
  position: relative;
  height: 40px;
  width: 40px;
  background-color: white;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.title-1 {
  color: white;
  font-size: 1.25rem;
  font-weight: 900;
}


.playing {
  display: flex;
  position: relative;
  justify-content: center;
  gap: 1px;
  width: 30px;
  height: 20px;
}

.greenline {
  background-color: #1db954;
  height: 20px;
  width: 2px;
  position: relative;
  transform-origin: bottom;
}

.line-1 {
  animation: infinite playing 1s ease-in-out;
  animation-delay: 0.2s;
}

.line-2 {
  animation: infinite playing 1s ease-in-out;
  animation-delay: 0.5s;
}

.line-3 {
  animation: infinite playing 1s ease-in-out;
  animation-delay: 0.6s;
}

.line-4 {
  animation: infinite playing 1s ease-in-out;
  animation-delay: 0s;
}

.line-5 {
  animation: infinite playing 1s ease-in-out;
  animation-delay: 0.4s;
}

@keyframes playing {
  0% {
    transform: scaleY(0.1);
  }

  33% {
    transform: scaleY(0.6);
  }

  66% {
    transform: scaleY(0.9);
  }

  100% {
    transform: scaleY(0.1);
  }
}
<div class="main-ind-card">

<div class="ind-card">
  <div class="top">
    <div class="pfp">
      <div class="playing">
        <div class="greenline line-1"></div>
        <div class="greenline line-2"></div>
        <div class="greenline line-3"></div>
        <div class="greenline line-4"></div>
        <div class="greenline line-5"></div>
      </div>
    </div>
    <div class="texts">
      <p class="title-1">Real Estate</p>
    </div>
  </div>
</div>




<div class="ind-card">
  <div class="top">
    <div class="pfp">
      <div class="playing">
        <div class="greenline line-1"></div>
        <div class="greenline line-2"></div>
        <div class="greenline line-3"></div>
        <div class="greenline line-4"></div>
        <div class="greenline line-5"></div>
      </div>
    </div>
    <div class="texts">
      <p class="title-1">Real Estate</p>
    </div>
  </div>
</div>



<div class="ind-card">
  <div class="top">
    <div class="pfp">
      <div class="playing">
        <div class="greenline line-1"></div>
        <div class="greenline line-2"></div>
        <div class="greenline line-3"></div>
        <div class="greenline line-4"></div>
        <div class="greenline line-5"></div>
      </div>
    </div>
    <div class="texts">
      <p class="title-1">Real Estate</p>
    </div>
  </div>
</div>


<div class="ind-card">
  <div class="top">
    <div class="pfp">
      <div class="playing">
        <div class="greenline line-1"></div>
        <div class="greenline line-2"></div>
        <div class="greenline line-3"></div>
        <div class="greenline line-4"></div>
        <div class="greenline line-5"></div>
      </div>
    </div>
    <div class="texts">
      <p class="title-1">Real Estate</p>
    </div>
  </div>
</div>



<div class="ind-card">
  <div class="top">
    <div class="pfp">
      <div class="playing">
        <div class="greenline line-1"></div>
        <div class="greenline line-2"></div>
        <div class="greenline line-3"></div>
        <div class="greenline line-4"></div>
        <div class="greenline line-5"></div>
      </div>
    </div>
    <div class="texts">
      <p class="title-1">Real Estate</p>
    </div>
  </div>
</div>



<div class="ind-card">
  <div class="top">
    <div class="pfp">
      <div class="playing">
        <div class="greenline line-1"></div>
        <div class="greenline line-2"></div>
        <div class="greenline line-3"></div>
        <div class="greenline line-4"></div>
        <div class="greenline line-5"></div>
      </div>
    </div>
    <div class="texts">
      <p class="title-1">Real Estate</p>
    </div>
  </div>
</div>


<div class="ind-card">
  <div class="top">
    <div class="pfp">
      <div class="playing">
        <div class="greenline line-1"></div>
        <div class="greenline line-2"></div>
        <div class="greenline line-3"></div>
        <div class="greenline line-4"></div>
        <div class="greenline line-5"></div>
      </div>
    </div>
    <div class="texts">
      <p class="title-1">Real Estate</p>
    </div>
  </div>
</div>


<div class="ind-card" width="280px" height="150px";>
  <div class="top">
    <div class="pfp">
      <div class="playing">
        <div class="greenline line-1"></div>
        <div class="greenline line-2"></div>
        <div class="greenline line-3"></div>
        <div class="greenline line-4"></div>
        <div class="greenline line-5"></div>
      </div>
    </div>
    <div class="texts">
      <p class="title-1">Real Estate</p>
    </div>
  </div>
</div>

  </div>

Solution

  • just give min-width:280pxto .ind-card class and width:100% to .main-ind-card class.

    check the result there is no scroll bar at bottom and images are moving from right to left. enter image description here