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:

On clicking read more/content increases:

.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 >
            <div >
              <div >
                <img width="140px" src="https://images.unsplash.com/photo-1579279219378-731a5c4f4d16?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8bXIlMjBiZWFufGVufDB8fDB8fA==&auto=format&fit=crop&w=500&q=60" />
              </div>
            
              <div >
                <div >
                  <h3 id="mobile-member-name">Mr bean</h3>
                  <p id="mobile-member-designation">Actor</p>
                </div>
                <div >
                  <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"   >Read less</span>  
                </div>
              </div>
            </div>
            <div >
              <div >
                <img width="140px" src="https://images.unsplash.com/photo-1579279219378-731a5c4f4d16?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8bXIlMjBiZWFufGVufDB8fDB8fA==&auto=format&fit=crop&w=500&q=60" />
              </div>
              <div ></div>
              <div >
                <div >
                  <h3 id="mobile-member2-name">Mr bean</h3>
                  <p id="mobile-member2-designation">Actor</p>
                </div>
                <div >
                  <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"      " >Read less</span
                  >
                </div>
              </div>
            </div>    
          
          </div>

CodePudding user response：

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;
  }

CodePudding user response：

I think adding

min-height: fit-content

to .scrolling-wrapper will do what you want