@asafarim/markdown-explorer-viewer/demo/src/scrollable-explorer.css

A reusable React component for exploring and viewing markdown files with file tree navigation

/* Scrollable Explorer Wrapper */
.scrollable-explorer-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  overflow: hidden;
}

.scrollable-explorer {
  width: 100%;
  height: 100%;
}

/* Direct sidebar styling with high specificity */
.scrollable-explorer [class*="sidebar"] {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Create a scrollable container for the sidebar content */
.scrollable-explorer [class*="sidebar"] > div:nth-child(2) {
  flex: 1;
  overflow-y: auto !important;
  height: calc(100% - 60px); /* Subtract header height */
}

/* Ensure FileTree is scrollable */
.scrollable-explorer [class*="fileTree"] {
  overflow-y: auto !important;
  height: auto !important;
}

/* Make sure the main content area is scrollable */
.scrollable-explorer [class*="mainContent"] {
  overflow: auto;
}