Making flexbox degrade gracefully

[csdude55]

My old format uses a table with two columns, and I'm replacing it with HTML5 tags. This seems to be working well (unless someone says that I should use something other than <main> or <section>):

<style>
main {
 background: #FFF;
 min-height: 400px;

 /* IE9 doesn't recognize flex, so assign this first then overwrite it next */
 display: block;

 display: flex
}

aside { flex-basis: 330px }
</style>

<main>
 <section>
 Left column (main content)
 </section>

 <aside>
 Right column (ads and similar, not relevant to the main content)
 </aside>
</main>

I have a small amount of traffic going back to IE9, though, and it doesn't look like flex or flex-basis go back that far:

[caniuse.com...]
[caniuse.com...]

Any suggestions on how to make this degrade gracefully?

If not, is there a CSS method to set aside { display: none } if the browser doesn't support flex?

If not, I'm guessing that I might could do this in JavaScript? I don't have a way to test IE9 so I'm not entirely sure that it would work:

<script>
if (window.getComputedStyle(document.querySelector('main')).getPropertyValue('display') !== 'flex')
 document.querySelector('aside').display = 'none';
</script>

[lucy24]

Option B: Instead of flexbox, use {display: inline-block;} which--according to caniuse dot com--is supported back to MSIE 8. (The fact that flexbox gives me the fantods has absolutely nothing whatsoever to do with this suggestion.)

Using javascript for essential display behaviors can be risky, since some users may have it disabled.

[csdude55]

I tried that originally, lucy, but then I think I have to assign a fixed width to both elements. It doesn't work when I want the left element to fill up the rest of the width without knowing it.

I discovered that there IS a @supports function in CSS!

But you'll be shocked to learn... IE doesn't support it LOL And since IE is the whole problem, anyway, then fat lot of good that does.

The closest pure-CSS workaround I've been able to find is this:

main {
 background: #FFF;
 min-height: 400px;

 display: block;
 display: flex
}

aside {
 width: 0;
 flex-basis: 330px
}

If the browser recognizes flex then it overwrites main { display: block } and aside { width: 0 }. So if it doesn't recognize flex then aside just goes away. And since we're talking about less than 1% of my traffic, anyway, then that's probably an acceptable loss.