Flexbox перекрывает другой flexbox

Я новичок в Stack Overflow, и у меня проблема с flexbox.

Я хочу использовать <main> и <footer> с display: flex;, где каждая строка основного имеет 2 столбца с height: 100% браузера, а нижний колонтитул имеет 2 строки, первая с 3 столбцами, а вторая - только с одним столбцом, оба с height: auto;

Но когда я делаю это, мой нижний колонтитул перекрывает <main>, потому что его высота составляет 100%, но мне он нужен для 100% детей. Я чист?

@font-face {
  font-family: "Open Sans";
  src: url(../fonts/OpenSans-Regular.ttf);
}

@font-face {
  font-family: "Time Burner";
  src: url(../fonts/TimeBurner-Regular.ttf);
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: "Open Sans";
  scroll-behavior: smooth;
}

main {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  height: 100%;
}

.flex {
  height: 100%;
  flex-basis: 50%;
  box-sizing: border-box;
  padding: 20px;
}

.home {
  background-attachment: fixed;
  background-image: url("../img/bg.jpg");
  background-position: 50%;
  background-size: cover;
}

.flex:nth-child(even) {
  border: 5px solid blue;
}

.flex:nth-child(odd) {
  border: 5px solid red;
}

.arrow {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%);
  width: 200px;
  height: 50px;
  background-color: gray;
  text-align: center;
}

footer {
  position: relative;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.footer {
  flex-basis: 100%;
  height: auto;
}

.thumb {
  position: fixed;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: gray;
  right: 20px;
  bottom: 20px;
}

@media (max-width: 768px) {
  .flex {
    flex-basis: 100%;
  }
  .arrow {
    bottom: -100%;
  }
}

<!DOCTYPE html>
<html>

<head>
  <!-- ¿Qué hacés en mi código? ¿Te gustó algo? 
		Bueno, como sea, que tengas una linda visita :) -->
  <meta charset = "UTF-8">
  <title>OnePage</title>
  <meta name = "theme-color" content = "#34a853" />
  <meta name = "viewport" content = "width=device-width" />
  <meta name = "mobile-web-app-capable" content = "yes" />
  <link rel = "icon" href = "img/favicon.png" />
  <link rel = "stylesheet" type = "text/css" href = "css/style.css" />
  <link rel = "stylesheet" type = "text/css" href = "bootstrap-3.3.7/dist/css/bootstrap.css" />
  <script type = "text/javascript" src = "js/script.js"></script>
</head>

<body>
  <main>
    <section class = "flex home" id = "inicio">
      1 - Izquierda
    </section>
    <section class = "flex home">
      2 - Derecha
    </section>
    <a class = "arrow" href = "#3">
      <span class = "glyphicon glyphicon-chevron-down" aria-hidden = "true"></span>
    </a>
    <section class = "flex" id = "3">
      3 - Izquierda
    </section>
    <section class = "flex">
      4 - Derecha
    </section>
  </main>
  <footer>
    <section class = "flex footer">
      5 - Footer
    </section>
  </footer>
  <a class = "thumb" href = "#inicio">
    <span class = "glyphicon glyphicon-chevron-up" aria-hidden = "true"></span>
  </a>
</body>

</html>

Для .flex измените значение на height: 100vh;, а затем для main полностью удалите свойство высоты.

— 09.08.2018 00:19

Действительно большое спасибо

— 09.08.2018 01:26

html css flexbox

08.08.2018 23:46

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Ответы 2

Вот мое решение для вас.

<!DOCTYPE html>
<html lang = "en">
<head>
  <meta charset = "UTF-8">
  <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
  <meta http-equiv = "X-UA-Compatible" content = "ie=edge">
  <title>Document</title>
</head>
<style>
  main,
  footer {
    display: flex;
    flex-wrap: wrap;
  }
  .main-item {
    flex:0 1 50%;
    height: 100vh;
    background-color: tomato;
  }

  .footer-item {
    flex: 1;
    background-color: lightsalmon;
  }

  .footer-item:last-child {
    flex: 0 0 100vw;
    background-color: blue;
  }

  
</style>
<body>
  <main>
    <div class = "main-item">m1</div>
    <div class = "main-item">m2</div>
    <div class = "main-item">m3</div>
    <div class = "main-item">m4</div>
  </main>
  <footer>
    <div class = "footer-item">f1</div>
    <div class = "footer-item">f2</div>
    <div class = "footer-item">f3</div>
    <div class = "footer-item">f4</div>
  </footer>
</body>
</html>

Спасибо (Грасиас), T04435.

09.08.2018 03:22