I've been a professional C, Perl, PHP and Python developer.
I'm an ex-sysadmin from the late 20th century.
These days I do more Javascript and CSS and whatnot, and promote UX and accessibility.
When you demonstrate making the search item take up more space, you set it to flex: 1, which is the same as it is already (from .container > div). What should it be instead? I've tried putting in higher numbers but don't know what to use to get it to appear like in your screenshot.
I also think it would be helpful if in your initial HTML example you included the classes you refer to later.
I believe in the example of making the .search take up remaining space, you just need to turn off the .container > div styling so that flex: 1; only applies to .search and not all divs within .container.
You have to replace the rule that came before it. So delete .container > div and target the search item with a class name. Also it might be worth considering that you won't see much of a difference on smaller screen sizes or with narrower flex containers.
I put together a visual explanation on Codepen to try and help to explain things and give working demos for you to see the effect in action.
Hope this helps!
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
When you demonstrate making the search item take up more space, you set it to
flex: 1, which is the same as it is already (from.container > div). What should it be instead? I've tried putting in higher numbers but don't know what to use to get it to appear like in your screenshot.I also think it would be helpful if in your initial HTML example you included the classes you refer to later.
Hi Ben,
I believe in the example of making the .search take up remaining space, you just need to turn off the .container > div styling so that flex: 1; only applies to .search and not all divs within .container.
Hope this helps/makes sense!:-)
Many thanks, Jack.
You have to replace the rule that came before it. So delete
.container > divand target the search item with a class name. Also it might be worth considering that you won't see much of a difference on smaller screen sizes or with narrower flex containers.I put together a visual explanation on Codepen to try and help to explain things and give working demos for you to see the effect in action.
Hope this helps!