I need some assistance with a layout issue I am facing. Currently, I have two flex containers in a row - one set to flex-start and the other to flex-end. Both of these containers are within a wrapping div that is also set to flex.
When the width of the window is at 100%, everything looks fine with both containers sticking to the start and end of the row. However, as I minimize the window width, the text on the right side begins to disappear:
https://i.stack.imgur.com/6mr8e.png
It seems that only when the input box reaches the edge of the window does it start to shrink: https://i.stack.imgur.com/6hLW5.png
I know that text itself cannot shrink, but my question is: Is it possible for the input box to start shrinking once the text on the right side meets the edge of the window?
If you would like to see the code or try it out yourself, you can visit this Stackblitz link:
Here is the code snippet for reference:
export default function App() {
return (
<div style={{ display: 'flex' }}>
<div
style={{ display: 'flex', justifyContent: 'flex-start', width: '100%' }}
>
<h1>Hello StackBlitz!</h1>
</div>
<div
style={{ display: 'flex', justifyContent: 'flex-end', width: '100%' }}
>
<Select data={[]} style={{ width: '20rem' }} />
<h1>Hello StackBlitz!</h1>
</div>
</div>
);
}