Situation

While developing a web app with Quasar, I noticed that QExpansionItem components nested within a QDrawer stopped working as soon as the drawer was toggled to its mini state. The content simply wouldn't show, even if the item was technically "expanded."

Task

I needed the expansion items to remain functional and their content to be visible even when the sidebar was minimized. The default framework behavior was aggressively hiding the nested elements.

Action

By inspecting the drawer in the browser DevTools, I identified the specific internal Quasar CSS rule causing the issue:

/* The Quasar Default */
.q-drawer--mini .q-mini-drawer-hide, 
.q-drawer--mini .q-expansion-item__content {
  display: none;
}

This rule explicitly forces all expansion item content to display: none whenever the parent drawer has the .q-drawer--mini class.

Result

To override this behavior, I applied a global CSS fix. This forces the content to stay as a block element and removes the transitions which can sometimes cause "flickering" or layout jumps in such a narrow width:

/*
  Fixes the incorrect behavior of expansion items in a
  narrow space (like a drawer in state `mini`)
*/
/*noinspection CssUnusedSymbol*/
.q-drawer--mini .q-expansion-item__content {
    display: block !important;
    transition: unset !important;
}