Very simple flex not working and I need your help.
I am trying to achieve something that seems relatively simple, but I'm tearing my hair out trying to work out what I've done wrong.
https://codepen.io/Dan-Brownson/pen/Rwvazex
Issue #1
My intention is to have a navbar (.nav-container) on the side of the webpage, 285px wide. The remaining width of the webpage should be filled with the main content (.main-container).
With my current html & CSS, I would expect the yellow nav bar to be exactly where it is, however i would not expect this huge gap between the nav-container and the main-container.
Issue/question #2
The next intention is to make it so that on screens smaller than 1024px, the navbar moves to the bottom of the screen, and the height will change to 185px, and the width will be 100vw.
The only way i was able to get this to work is by setting no-wrap, and column-reverse.
I am just trying to work out why setting it to row-reverse wouldn't work here?
From my understanding row would look like this
--
--
and column like this
I I
I I
I I
Thank you in advance!
https://codepen.io/Dan-Brownson/pen/Rwvazex
Issue #1
My intention is to have a navbar (.nav-container) on the side of the webpage, 285px wide. The remaining width of the webpage should be filled with the main content (.main-container).
With my current html & CSS, I would expect the yellow nav bar to be exactly where it is, however i would not expect this huge gap between the nav-container and the main-container.
Issue/question #2
The next intention is to make it so that on screens smaller than 1024px, the navbar moves to the bottom of the screen, and the height will change to 185px, and the width will be 100vw.
The only way i was able to get this to work is by setting no-wrap, and column-reverse.
I am just trying to work out why setting it to row-reverse wouldn't work here?
From my understanding row would look like this
--
--
and column like this
I I
I I
I I
Thank you in advance!
