Flexbox растягивается недостаточно далеко

Question

Я использую flexbox для создания базового макета для веб-приложения.Я хочу, чтобы в верхней части было меню, а под ним - область основного содержимого слева и область дополнительного содержимого справа, причем оба они по вертикали заполняют пространство, оставшееся под меню.Если в HTML включены только области содержимого, растяжка охватывает все.Однако, когда я включаю меню, я получаю много пустого пространства между меню и областями содержимого.

В скрипте JS я добавил немного JavaScript для удаления меню, когда вы нажимаете на любой изссылки, чтобы дать лучшее представление о том, сколько пустого пространства (1rem) я бы хотел между меню и двумя областями содержимого.

Можно ли этого добиться с помощью flex?Спасибо!

$(document).ready(function() {
  $("a").click(function() {
    $(this).closest(".main-menu").remove();
  })
})

html {
  height: 100%;
}

body {
  display: flex;
  min-height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  flex-wrap: wrap;
  align-content: stretch;
}

.main-menu {
  width: 90%;
  margin: 1rem calc(5% - 1px) 1rem calc(5% - 1px);
  padding: 1rem;
  border: 1px dashed black;
  align-self: flex-start;
}

.main-menu ul {
  margin: 0;
  border: 0;
  padding: 0;
  display: inline;
}

.main-menu ul li {
  margin: 0;
  border: 0;
  padding: 0;
  display: inline;
}

.primary-stuff {
  margin: 1rem 1rem 1rem calc(5% - 1px);
  width: calc(75% - 1rem - 1px);
  border: 1px dashed black;
}

.secondary-stuff {
  margin: 1rem calc(5% - 1px) 1rem 1rem;
  width: calc(15% - 1rem - 1px);
  border: 1px dashed black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main-menu">
  <ul>
    <li><a>Link 1</a></li>
    <li><a>Link 2</a></li>
  </ul>
</div>
<div class="primary-stuff"></div>
<div class="secondary-stuff"> </div>

<div style="position:absolute;background:#FFC; width: calc(5% - 1px); height: 100%; left: 0;"></div>

<div style="position:absolute;background:#FFC; width: calc(5% - 1px); height: 100%; right: 0; top: 0;"></div>

<div style="position:absolute;background:#FFC; height: 1rem; width: 100%; right: 0; top: 0;"></div>

<div style="position:absolute;background:#FFC; height: 1rem; width: 100%; right: 0; bottom: 0;"></div>

Скрипка:

https://jsfiddle.net/don01001100/kdg04ubr/

Answer 1

Вы не можете сделать это с flexbox, потому что способ align-content работает с wrap.

Однако макет прост с помощью CSS Grid:

body {
  display: grid;
  grid-template-columns: 75% 1fr;
  grid-template-rows: auto 1fr;
  grid-gap: 1rem;
  min-height: 100vh;
}

nav {
  grid-column: 1 / -1;
}

/* non-essential decorative styles */
body             { margin: 0; padding: 1rem 2rem; }
nav              { background-color: lightgreen; padding: 1rem; }
.primary-stuff   { background-color: lightblue; }
.secondary-stuff { background-color: orange; }
*                { box-sizing: border-box; }

<nav>
  <a>Link 1</a>
  <a>Link 2</a>
</nav>
<div class="primary-stuff"></div>
<div class="secondary-stuff"> </div>

Кроме того, все те расчеты, которые у вас есть для наценки, не нужны.Вот простое решение, которое упростит ваш код: Flexbox: 4 элемента в строке

Answer 2

Возможно, вы обнаружите, что Grid Layout лучше подходит для этого типа макета, так как он обеспечивает более чистый метод размещения элементов так, как вам нужно, без необходимости дополнительной разметки HTML.

Вы можете получить нужный макет с помощью CSS-сетки следующим образом:

html {
  height: 100%;
}

body {
  
  /* Cause grid to fill vertical space */
  height:100%;
  
  /* Prevent overflow due to padding */
  box-sizing:border-box;
   
  /* Use grid display type */
  display: grid;

  /* Tells grid to cause second row to fill 
     avaible/remaining vertical space */
  grid-template-rows: auto 1fr;

  /* Define the grid layout, in terms of areas
     that are distributed between 3 colums and
     2 rows */
  grid-template-areas: 
    "menu menu menu" 
    "primary primary secondary";
  
  /* Specify spacing between grid elements */
  grid-gap: 1rem;
  
  margin: 0;
  padding: 1rem;
  background:grey;
}

.main-menu {
  background: pink;
  
  /* Accociate the main-menu with the menu area
     of your grid-template-areas defined above */
  grid-area: menu;
}

.main-menu ul {
  margin: 0;
  padding: 0;
  display: inline;
}

.main-menu ul li {
  margin: 0;
  padding: 0;
  display: inline;
}

.primary-stuff {
  background: lightblue;
  /* Accociate the primary-stuff with the primary area
     of your grid-template-areas defined above */
  grid-area: primary;
}

.secondary-stuff {
  background: lightgreen;
  /* Accociate the secondary-stuff with the secondary area
     of your grid-template-areas defined above */
  grid-area: secondary;
}

<div class="main-menu">
  <ul>
    <li><a>Link 1</a></li>
    <li><a>Link 2</a></li>
  </ul>
</div>
<div class="primary-stuff">
  primary content
</div>
<div class="secondary-stuff">
  secondary content
</div>