Стилизация боковой панели с основным контентом + липкий колонтитул с помощью flexbox

Question

У меня есть боковая панель и основное содержимое, а также панель навигации, построенная с SUIR . Я хочу убедиться, что основное содержимое всегда отображается и не обрезается при отображении боковой панели.

Вот мой компонент панели инструментов, отображающий компоненты боковой панели / содержимого

const Dashboard = props => {
  return (
    <div
      style={{ height: "100vh", display: "flex", flexFlow: "column nowrap" }}
    >
      <div>
        <PageHeader />
      </div>
      <div style={{ flex: 1 }}>
        <SidebarExample>
          <DashboardContent />
        </SidebarExample>
      </div>
    </div>
  );
};

I здесь также есть кодовое поле с примером

Answer 1

Мне кажется, что вы можете решить эту проблему, просто показывая свое меню поверх основного контента, используя position:absolute; и z-index.

Но из того, что я думаю, вы можете попробовать CSS Подход подобный этому:

-----------------------------
|    |                      |
|    |                      |
|    |                      |
|    |                      |
|    |                      |
 menu      content
 10%        90%

затем примените его следующим образом:

.menu[style*="hidden"] .content {
   width: 90vw;
}

.menu:not([style*="hidden"]) .content {
   width: 100vw;
}

Предполагая, что вы применяете visibility: hidden; к своему меню, когда скрываете его. В противном случае вы можете изменить "скрытый" на любое свойство, которое вы применяете.

Answer 2

Проблема в том, что между вашим элементом строки Flex и двумя внутренними элементами (боковой панелью и содержимым) есть элемент. Вот что я вижу в браузере:

<div style="flex: 1 1 0%;">
  <div class="ui segment pushable"> <!-- this element needs flex -->
    <div class="ui inverted vertical ..."> ... </div>
    <div class="pusher"> ... </div>
  </div>
</div>

Перестройтесь немного, чтобы это исправить, и все работает нормально.