I've been out of practice with flexbox for some time and I can't figure out why the width and height properties are not being applied to each flex item as expected. All the items seem to have an equal width, but not the width that I specified. Additionally, they are all displayed on a single line even though I didn't set it to nowrap.
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: https://i.sstatic.net/WiJn0.png
desired output:
My goal is to ensure that each item has equal height and width, with 3 items per column that are responsive.