My flex items wont take a width and height property and stay on one line

I haven't used flexbox for a while but I'm not exactly sure why my width and height aren't taking effect for each of the flex items and they all seem to be taking an equal width but not the width I have input. They also all sit on one line but I haven't included A no wrap.

    const Filter = () => {      return (              <div className="store-results-inner-container">          {alphabetIntoArray.map((c, i) => {            return (              <div key={i} className="alphabet-individual-container">                {filteredValues                  .filter(store => store.title.rendered.startsWith(c)).length === 0                   ? <h1 ref={ el => itemsRef.current[i] = el } className={'Grey'}>{c}</h1>                  : <h1 ref={ el => itemsRef.current[i] = el } className={'notGrey'}>{c}</h1>                   }                         {filteredValues                  .filter(store => store.title.rendered.startsWith(c))                  .map((item, index) => (                       <li key={index}>{item.title.rendered}</li>                  ))}                </div>            );          })}        </div>      );    }  

css:

    .store-results-inner-container {      display: flex;      align-items: center;      justify-content: center;      padding-top:5%;      padding-bottom:5%;      height: auto;      width: 90%;      padding-left: 5%;      padding-right: 5%;      background-color: seagreen;  }    .alphabet-individual-container {      width: 1150px;      height: 200px;      flex: 1 1 0px;  }  

output:

desired output:

I want them to have an equal height and width and have 3 per column which are responsive.

https://stackoverflow.com/questions/66020077/my-flex-items-wont-take-a-width-and-height-property-and-stay-on-one-line February 03, 2021 at 09:38AM