I am facing an issue with my flexbox layout where the items, which are expandable like dropdowns, expand along with the row when clicked. I want only the item to expand without affecting the rest of the row.
Current behavior: https://i.sstatic.net/60wBh.png
Expected behavior: https://i.sstatic.net/p1oRj.png
This is the code for the columns:
.list {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 80px auto 0;
max-width: 1096px;
@include mediaQuery(max, 1080px) {
width: 940px;
}
@include mediaQuery(max, $tablet) {
width: 526px;
}
@include mediaQuery(max, $mobile) {
width: 335px;
}
@include mediaQuery(max, 320px) {
width: 285px;
}
}
I have searched for similar issues on Stack Overflow but haven't found a solution yet.
Any assistance would be greatly appreciated! Thank you!
Additional code related to the question:
<div className="analyzed-genes-list">
{
data.map((item, index) => (
<GeneCard key={index} gene={item.gene} cancers={item.cancers} positives={this.state.posGenes} traits={this.state.traits} />
))
}
</div>
Code snippet from GeneCard.js:
<div className={this.state.toggleBody ? "gene-card-active" : "gene-card"}>
<div className="gene-card-title" onClick={this.showBody} style={{backgroundImage: this.state.toggleBody ? `url(${ChevronUp})` : `url(${ChevronDown})`}}>
<span className="gene-name">{this.props.gene}</span>
{
this.state.pos ?
<span className="pos-variant">{this.state.variants} variant
{ this.state.variants > 1 ? 's' : null }
detected</span>
:
<span className="variant">Variant not detected</span>
}
</div>
{
this.state.toggleBody ?
<div className="gene-card-body">
{
this.props.cancers.map((cancer, index) => (
<span key={cancer} className="cancer">
{cancer}
{
index === this.props.cancers.length - 1 ?
null
:
','
}
</span>
))
}
</div>
:
null
}
</div>