Responsive does not work inside flexbox.

kjdion84

The responsive plugin does not work when inside a flexbox container.

Example: https://jsfiddle.net/ejkp3yv9/

I attempted to add overflow: hidden which had no effect (as mentioned here: https://datatables.net/forums/discussion/33468/datatables-responsive-inside-flexbox-doesnt-hide-columns)

galvarez421

I encountered a similar issue with scrollX not appearing to work, but the actual issue is with the Flex-related styles, not DataTables itself. See https://stackoverflow.com/questions/51338182/prevent-a-wide-table-from-stretching-the-flexbox-item-and-container-make-it-th.

The fix in your case involves the following steps:

1. Make .d-flex have a display role of 'flex', otherwise the .sidebar and .content elements won't have the desired Flex layout.
2. Change the .content rule so that flex is 1 and min-width is 0 (see link above for an explanation of why this is needed).

So, your new CSS should look like this:

.d-flex {
  display: flex;
}

.sidebar {
    flex: 0 0 250px;
}

.content {
    flex: 1;
    min-width: 0;
}

You can see that this fix works here: https://jsfiddle.net/ejkp3yv9/2/