Can I use CSS Flexbox to remove columns?

Question

Is there some way CSS flexbox will remove columns (flex items) when the available real estate is small - similar to the functionality provided by FooTable?

Answer 1

The element will tighten up to 0px if needed. Hiding the content can be handled by using overflow: hidden, but beware that this may create problems in other scenarios.
Check the following snippet to see the result:

.container {
    display: flex;
}

.child1, .child3 {
    flex: 1 0 50%;
}

.child2 {
    flex: 1;
    overflow: hidden;
}

<div class="container">
    <div class="child1">child1</div>
    <div class="child2">child2</div>
    <div class="child3">child3</div>
</div>

Other suggestions:

• Use media queries to hide the content depending on the window size;
• Use media queries to apply the overflow property depending on the window size;
• If you don't want to hide it, go with flex-wrap to spread your flex items into 2+ rows