flexible width with overlaping divs on blazor with CSS and bootstrap

Question

I have a hand of cards on my UI and I want to allow fitting more cards than actually fit on the div, by letting them overlap if necessary.

My cards are linked to an array using blazor, like this:

<div class="PlayersHand d-flex flex-row justify-content-center">
    @foreach(var card in Client.Game.Me.CardsInHand)
    {
        <CardViewer Card=card IsHandCard=true />
    }
</div>

My cards get arranged properly. But when there are too many the overflow kicks in with hidden, or scrollbar or whatever is set. I don't want that to happen. I want my cards to overlap as much as necessary, to fit in the space.

This would be the expected behavior:

Is it possible for you to create an MWE in a fiddle? (e.g. [here](https://blazorfiddle.com/)) — Astrid E., Apr 26 '22 at 16:17
I did what I showed in the example using flex row. But I've no clue on how to progress to have this flexible width... Width different justify-content I can have my items expanded, centered, or to the right or left, but there is no "justify-content" that allows this "overlapping when necessary" behavior — javirs, Apr 26 '22 at 19:02
Can the answers to [this question](https://stackoverflow.com/questions/43919067/make-flex-items-overlap) be of any help? — Astrid E., Apr 27 '22 at 13:26

score 2 · Answer 1 · answered May 01 '22 at 06:37

Check the below snippet

:root {
  /*Variables,remove needed*/
  --bg-one: #973999;
  --bg-two: #f8598b;
  --bg-three: #f7bf00;
  --bg-panel: #ebebeb;
  --color-text: #999;
  --distance: 4rem;
  --height: 150px; /*OR Auto*/
  --width: 100px; /*OR Auto*/
}

body {
  /*You may remove this rule*/
  background-image: linear-gradient(
    to bottom right,
    var(--bg-one),
    var(--bg-two),
    var(--bg-three)
  );
  height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
  margin: 0;
}

.cards {
  display: flex; /*MAIN*/
}

.card {
  z-index: 1; /*MAIN*/
  background: var(--bg-panel); /*MAIN*/
  height: var(--height);
  max-width: var(--width);

  /*Styles(You may remove)*/
  border-radius: 1rem;
  padding: 2rem;
  box-shadow: 4px 4px 12px 2px rgba(0, 0, 0, 0.6);
}
.card p {
  /*You may remove this rule*/
  color: var(--color-text);
}

.card:not(:first-child) {
  margin-left: calc(var(--distance) * -1); /*MAIN*/
}

<div class="cards">
  <div class="card">

    <p>This is an article and this has some content.</p>
  </div>
  <div class="card">

    <p>This is an article and this has some content.</p>
  </div>
  <div class="card">

    <p>This is an article and this has some content.</p>
  </div>
  <div class="card">

    <p>This is an article and this has some content.</p>
  </div>
  <div class="card">

    <p>This is an article and this has some content.</p>
  </div>
  <div class="card">

    <p>This is an article and this has some content.</p>
  </div>
</div>

Idea from here

I have edited the code from the above link,I don't know blazor but I think this will help you,I have commented most of my code.

score 1 · Accepted Answer · answered May 02 '22 at 07:45

I did not try suggestion from Neptotech because, as pointed by Astrid in the comments in the main question, there was a solution based on grid that was way less verbose, that's just it :

.PlayersHand {
    margin-right: auto;
    margin-left: auto;
    justify-content: center;
    display: grid;
    width:100%;
    grid-template-columns: repeat(auto-fit, minmax(10px, max-content));
}

The grid-template thing is the core thing I needed.

flexible width with overlaping divs on blazor with CSS and bootstrap

2 Answers2

Check the below snippet

Idea from here