Stop child element to fill parent width and maintain content size

Question

I am trying to create a list that scrolls horizontal in a card but only if it's conent exceeds parents dynamic width. I want the width to be dynamic but at the same time maintaining the width(size) of the cards inside. I have played with having fixed width and got it to work. But with dynamic width it seems like I cant find a solution. Help would be much appreciated.

.site-container {
  max-width: 1200px;
}

body {
    background-color: gray;

}
.card {
    height: 114px;
    width: 164px;
    background-color: #eee;
    border: 2px solid white;
    border-radius: 8px;
  }
  
  .card-list{
    display: flex;
      overflow-x: scroll;
  }
  
  .card-list::-webkit-scrollbar{
    display: none;
  }
  
  .vla {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    margin-top:8px;
    margin-left: 25px;
  }

.page-content-card {
    background-color: #ffffff;
    border-radius: 8px;
    margin-top: 8px;
    position: relative;
    height: 100%;
    width: 100%;
    padding: 16px;
    resize: horizontal;
    /*To show that content don't show scroll when shrunk */
    overflow: auto;
    max-height: fit-content;
    max-width: fit-content;
}



 .wrapper-big-card {
    display: flex;
    flex-direction: column;
    border: 1px solid #eee;
    border-radius: 8px;
    margin-top: 4px;
    width:100%;
  }
  
  .hover-wrapper {
    border-radius: 8px;
    padding: 8px;

  }
  
  .hover-wrapper:hover {
    background-color: #eee;
  }

<div class="site-container">
  <div class="page-content-card">  
    <!-- Other content on site -->
    <div class="wrapper-big-card">
      <div class="hover-wrapper">        
       <div class="vla">  
        <div class="card-list">
          <div class="card ">
          </div>
          <div class="card ">
          </div>
          <div class="card ">
          </div>
          <div class="card ">
          </div>
          <div class="card ">
          </div>
          <div class="card ">
          </div>
          <div class="card ">
          </div>
          <div class="card ">
          </div>
          <div class="card ">
          </div>
          <div class="card ">
          </div>
          <div class="card ">
          </div>
        </div>      
        </div>           
      </div>      
    </div>  
  </div>
</div>

score 1 · Accepted Answer · answered Dec 13 '22 at 15:58

Not sure if I understand the desired result correctly, but assuming that the goal is to keep the size of card when parent changes size, perhaps try add flex-shrink: 0 to card, so that it does not shrink to fit parent size:

.card {
    /*   Add this */
  flex-shrink: 0;
  height: 114px;
  width: 164px;
  background-color: #eee;
  border: 2px solid white;
  border-radius: 8px;
}

Example:

.site-container {
  max-width: 1200px;
}

body {
  background-color: gray;
}
.card {
    /*   Add this */
  flex-shrink: 0;
  height: 114px;
  width: 164px;
  background-color: #eee;
  border: 2px solid white;
  border-radius: 8px;
}

.card-list {
  display: flex;
  overflow-x: scroll;
}

.card-list::-webkit-scrollbar {
  display: none;
}

.vla {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  margin-top: 8px;
  margin-left: 25px;
}

.page-content-card {
  background-color: #ffffff;
  border-radius: 8px;
  margin-top: 8px;
  position: relative;
  height: 100%;
  width: 100%;
  padding: 16px;
  resize: horizontal;
  /*To show that content don't show scroll when shrunk */
  overflow: auto;
  max-height: fit-content;
  max-width: fit-content;
}

.wrapper-big-card {
  display: flex;
  flex-direction: column;
  border: 1px solid #eee;
  border-radius: 8px;
  margin-top: 4px;
  width: 100%;
}

.hover-wrapper {
  border-radius: 8px;
  padding: 8px;
}

.hover-wrapper:hover {
  background-color: #eee;
}

<div class="site-container">
  <div class="page-content-card">  
    <!-- Other content on site -->
    <div class="wrapper-big-card">
      <div class="hover-wrapper">        
       <div class="vla">  
        <div class="card-list">
          <div class="card ">
          </div>
          <div class="card ">
          </div>
          <div class="card ">
          </div>
          <div class="card ">
          </div>
          <div class="card ">
          </div>
          <div class="card ">
          </div>
          <div class="card ">
          </div>
          <div class="card ">
          </div>
          <div class="card ">
          </div>
          <div class="card ">
          </div>
          <div class="card ">
          </div>
        </div>      
        </div>           
      </div>      
    </div>  
  </div>
</div>

Thx m8! This do solve my code-snippet problem :D. But I still had the problem with my code locally. But there was another wrapper on the whole page with display:grid. Removing that solved it. Messy messy code.. — J4v4Scr1pt, Dec 13 '22 at 17:08

Stop child element to fill parent width and maintain content size

1 Answers1