Search code examples
htmlcssflexboxscrollable

Why scrollable cards height are not increasing according to his content

I designed the scrollable cards. The cards are only for mobile screens. The current issue is that more data gets encapsulated inside the scrollable wrapper as the content grows. No matter how long the content is, I want the div's height to increase. Is there a fix for this design that makes the card's height rise in proportion to its contents?

The read more functionality is implemented, but I didn't add it to the snippet. By default, all the content will be the same. But on read more, the content can vary. So, I want the design to be fixed so read more content does not affect the card.

By default:

enter image description here

On clicking read more/content increases:

enter image description here

.scrolling-wrapper {
    -webkit-overflow-scrolling: touch;
    height: 474px;
    width: 100%;
    padding-inline: 40px;
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    z-index: 0;
    padding-top: 150px;
    visibility: visible;
  }

  .scrolling-wrapper::-webkit-scrollbar {
    display: none;
  }

  .card {
    width: 100%;
    flex: 0 0 auto;
    background-color: green;
    border-radius: 20px;
    position: relative;
    margin-inline-end: 10px;
  }

  .our-member-owner-card-image {
    position: absolute;
    top: -66px;
    z-index: 10;
    left: 29%;
  }

  .card-content {
    position: absolute;
    padding-top: 38px;
  }

  .member-detail {
    padding-top: 55px;
    line-height: 1.7;
  }

  .member-detail h3 {
    text-align: center;
    color: #263244;
    font-weight: 700;
    font-family: "Lato";
  }

  .member-detail p {
    text-align: center;
    color: #737c89;
  }

  .member-description {
    padding-inline: 20px;
    color: #263244;
    line-height: 1.6;
    padding-top: 9px;
    font-weight: 500;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
  }

  .member-description .read-more {
    color: #eb644c;
    text-decoration: underline;
    cursor: pointer;
  }
<div class="scrolling-wrapper">
            <div class="card">
              <div class="our-member-owner-card-image">
                <img width="140px" src="https://images.unsplash.com/photo-1579279219378-731a5c4f4d16?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8bXIlMjBiZWFufGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60" />
              </div>
            
              <div class="card-content">
                <div class="member-detail">
                  <h3 id="mobile-member-name">Mr bean</h3>
                  <p id="mobile-member-designation">Actor</p>
                </div>
                <div class="member-description">
                  <span id="mobile-member-description">
                    Mr Bean has extensive work experience during his career of more than 25 years in the film industry.
                  </span>
                  <span id="mobile-more" >Some dummy text </span>
                  <span id="mobile-member-description-readmore"  class="readMoreLink read-more" >Read less</span>  
                </div>
              </div>
            </div>
            <div class="card">
              <div class="our-member-owner-card-image">
                <img width="140px" src="https://images.unsplash.com/photo-1579279219378-731a5c4f4d16?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8bXIlMjBiZWFufGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60" />
              </div>
              <div class="card-image-shadow"></div>
              <div class="card-content">
                <div class="member-detail">
                  <h3 id="mobile-member2-name">Mr bean</h3>
                  <p id="mobile-member2-designation">Actor</p>
                </div>
                <div class="member-description">
                  <span id="mobile-member2-description">
                   Mr Bean has extensive work experience during his
                    career of more than 25 years in the film industry
                  </span>
                  <span id="mobile-more2" >Some dummy text </span>
                  <span id="mobile-member2-description-readmore"     class="readMoreLink read-more" " >Read less</span
                  >
                </div>
              </div>
            </div>    
          
          </div>

Solution

  • As I understood your question, your issue is that the content is pushing out because you have defined an absolute height for the container. Let the content determine the height dynamically. Instead of using height and max-height, try using min-height. That way, if the content needs more space, it can grow.

    So removing this should make the cards grow based on the size of the content

    .scrolling-wrapper {
    height: 474px;
  }