How to make flex container width adapt to the width (and numbers) of flex items?

Question

I have a CSS problem. I'm not sure there is a way to do what I want for my layout (a way only using CSS) :

I have a main container (flex display, column nowrap flex-flow) with a searchbar and a secondary container in it. In my secondary container (flex display, row wrap flex-flow), I have several cards. Those cards have a fixed width.

What I want is to have my secondary container centered on my page, with a width fitting its bigger row, and the searchbar on top having the same width than this secondary container.

I just can't seem to make the secondary container width adapt, it keeps the width of the window.

<div class="mainContainer">
  <input type="search" placeholder="search" id="search"/>
  <div class="secondaryContainer">
     {returningCards()}
  </div>
</div>

(the returningCards function returns my cards)

.mainContainer {
  width: 100%;
  height: fit-content;
  min-height: 200px;
  padding: 1rem;
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: center;
  row-gap: 1rem;
  column-gap: 0.5rem;
}
#search {
  width: 100%;
  height: 2rem;
  background-color: var(--Mwhite);
  border: 0.05rem solid var(--Mdefault);
  border-radius: 0.5rem;
  color: var(--Mdefault);
  padding: 0 0 0 0.5rem;
  outline: 0.05rem solid transparent;
  transition: outline 0.5s;
}
.secondaryContainer {
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  align-items: flex-start;
  row-gap: 1rem;
  column-gap: 0.5rem;
}
.card {
  background-color: var(--Mwhite);
  border: 0.05rem solid var(--Mdefault);
  width: 12.5rem;
  height: fit-content;
  min-height: 16.25rem;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: space-between;
  box-shadow: var(--Mdefault) 0 0 0;
  transition: box-shadow 0.5s, border 0.5s;
  border-radius: 0.8rem;
}

Answer 1

You could use a single grid (instead nested flexbox) and set the input on the first row among and before the cards.

here is an example of the idea or a codepen with a side element https://codepen.io/gc-nomade/pen/NWpVeOY :

* {
  box-sizing: border-box;
}

.mainContainer {
  min-height: 200px;
  padding: 1rem;
}

#search {
  width: 100%;
  height: 2rem;
  background-color: var(--Mwhite);
  border: 0.05rem solid var(--Mdefault);
  border-radius: 0.5rem;
  color: var(--Mdefault);
  padding: 0 0 0 0.5rem;
  outline: 0.05rem solid transparent;
  transition: outline 0.5s;
  grid-column: 1 / -1;
}

.secondaryContainer {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12.5rem, max-content));
  justify-content: center;
  row-gap: 1rem;
  column-gap: 0.5rem;
}

.card {
  background-color: var(--Mwhite);
  border: 0.05rem solid var(--Mdefault);
  width: 12.5rem;
  height: fit-content;
  min-height: 16.25rem;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: space-between;
  box-shadow: var(--Mdefault) 0 0 0;
  transition: box-shadow 0.5s, border 0.5s;
  border-radius: 0.8rem;
}

input#search,
.card {
  border: 1px solid black;
  ;
}

<div class="mainContainer">

  <div class="secondaryContainer">
    <input type="search" placeholder="search" id="search" />
    <div class="card">card</div>
    <div class="card">card</div>
    <div class="card">card</div>
    <div class="card">card</div>
    <div class="card">card</div>
    <div class="card">card</div>
    <div class="card">card</div>
    <div class="card">card</div>
    <div class="card">card</div>
    <div class="card">card</div>
    <div class="card">card</div>
    <div class="card">card</div>
    <div class="card">card</div>
    <div class="card">card</div>
    <div class="card">card</div>
    <div class="card">card</div>
  </div>
</div>