Hi!
I have a Global block with a Section that has two columns. (Not New Flexbox options).
These columns are expected to reflow in narrow containers automatically, and that isn’t happening when placed as a shortcode into an HTML or Text widget in the Sidebar. Columns stay side-by-side inside the narrow sidebar in the desktop view.
Only after the sidebar itself reflows below the article, Global block starts to reflow normally.
Thanks!
Hi Misho,
Yes, unfortunately that’s the nature of the old column (and also effects the new ones). We use media queries to tell the columns when to “break” and that is based on the width of the entire screen, not the contained area.
The whole concept of responsively changing based on the width of a parent container element is one of those holy grails of responsive web design that the community has been trying to solve but has faced problems with browser standards. Here’s an interesting read: https://philipwalton.com/articles/responsive-components-a-solution-to-the-container-queries-problem/
You can somewhat get around it using the new Row element and a technique we’re called “auto responsive columns”. Kory’s made a video about it here: https://www.youtube.com/watch?v=1jgsgvtdyn8
The gist of it is that you click “Custom” and set the whole value to something like 300px for example. That will let each column try to take up 300px and start wrapping if they exceed the container width.
Great!
It crossed my mind to convert the old Global blocks into new one with “auto responsive columns”. That eliminates the Media queries, which is a very nice and elegant solution. Didn’t think of that before your video. 
Thanks!
You’re welcome! 