My goal is to keep fave_hold at 100% of its parent div, while limiting the width of .faves to fit its child elements. These elements are generated dynamically with predefined widths.
Below is the code snippet in React/JSX format:
<div id='fave_hold'>
{this.props.MenuFave.current === '1' &&
<div className='faves' id='fave_hold_arc'>
{tags1}
</div>
}
{this.props.MenuFave.current === '280' &&
<div className='faves' id='fave_hold_news'>
{tags280}
</div>
}
{this.props.MenuFave.current === '268' &&
<div className='faves' id='fave_hold_news'>
{tags268}
</div>
}
</div>
And here is the corresponding CSS:
#fave_hold {
width: 100%;
height: 100%;
}
.faves {
height: 100%;
}
I have experimented with different display properties without success.
For a visual reference, please see the screenshot below:
https://i.sstatic.net/ORH19.png
The ultimate objective is to centrally align the content using this approach.
To explore the interactive prototype, click on the following link: