Как разбить макеты столбцов на заданное пространство и сделать контейнер без прокрутки, используя угловую туманность

Question

Я использую небулярную тему с фиксированным заголовком и пробую разделить столбцы с указанной шириной и высотой.Но ни один из них не работает должным образом, так как на расположение столбцов не влияют мои свойства width и height в локальном компоненте scss.

<nb-layout>
   <nb-layout-column>First</nb-layout-column>
   <nb-layout-column>Second</nb-layout-column>
</nb-layout>

Поскольку у меня есть фиксированный заголовок, контейнер body снова начинается сtop:0 положение и, следовательно, делает контейнер тела для прокрутки.Поэтому здесь я хочу, чтобы контейнер тела не прокручивался без использования overflow:hidden.

Я создал ссылку на стек: https://stackblitz.com/edit/github-gv8sej

1. Пожалуйста, проверьтеи помогите мне сделать так, чтобы ширина первого столбца занимала 70%, а второго до 30% в общей сложности 100% контейнера <nb-layout>.
2. Как сделать так, чтобы мой домашний компонент не мог прокручиваться при наличии фиксированного заголовка.

Answer 1

В небулярном макете используется Flex, поэтому вместо ширины используйте свойство flex.

nb-layout{
  width:100%;
  height:100%;
}
nb-layout-column:first-child {
  flex: 2 !important;
  background: #e3e6f9;
}
nb-layout-column:last-child {
  flex: 1 !important;
  background: #f4f4f7;
}

И прокрутка вызывается следующей строкой:

.nb-theme-default nb-layout .layout {
   min-height: 100vh;
}