JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<div class="mainContainer">
    <div class="topMenu"></div>
      <div class="container_left">
          <div class="leftMenu floatLeft"></div>
        </div>
    <div class="container">
        <div class="information floatLeft">
            жалуй, начнем с того, что попроще. Когда использовать height: 100%? На самом же деле, вопрос часто звучит немного по-другому: «Как мне сделать так, чтобы моя страница заняла всю высоту экрана?». Ведь правда?

Для ответа на него нужно понять, что height: 100% равен высоте родительского элемента. Это не магическое «высота всего окна». Так что, если вы захотите, чтобы ваш элемент занял все 100% от высоты окна, то установить height: 100% будет недостаточно.

Почему? А потому, что родителем вашего контейнера является элемент body, а у него свойство height установлено в auto по умолчанию; а значит — его высота равна высоте контента. Конечно, вы можете попробовать добавить height: 100% к body, но этого тоже будет недостаточно.

Почему? А все потому же, родителем элемента body является элемент html, у которого также свойство height равно auto и он такжжалуй, начнем с того, что попроще. Когда использовать height: 100%? На самом же деле, вопрос часто звучит немного по-другому: «Как мне сделать так, чтобы моя страница заняла всю высоту экрана?». Ведь правда?

Для ответа на него нужно понять, что height: 100% равен высоте родительского элемента. Это не магическое «высота всего окна». Так что, если вы захотите, чтобы ваш элемент занял все 100% от высоты окна, то установить height: 100% будет недостаточно.

Почему? А потому, что родителем вашего контейнера является элемент body, а у него свойство height установлено в auto по умолчанию; а значит — его высота равна высоте контента. Конечно, вы можете попробовать добавить height: 100% к body, но этого тоже будет недостаточно.

Почему? А все потому же, родителем элемента body является элемент html, у которого также свойство height равно auto и он также растягивается под размер...

CSS

html,body{
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
}
html{
    min-height: 100%;
    height: 1px;
}
body{
    height: 100%;
}
.mainContainer{
    min-height: 100%;
    height: 1px;
    width: 100%;
}
.topMenu{
    height: 10%;
    width: 100%;
}
.container{
    min-height:90%;
    height: auto;
    width: 100%;
}
.container_left {
     min-height:90%;
     height: 100%;
    width:19%;
    float:left;
}
.leftMenu{
    height: 100%;
    width: 100%;
    padding: 1.5em 1em 1.5em 1em;
    margin-right: -2em;
    overflow-x: hidden;
    background-color:red;
    box-sizing:border-box;
}
.information{
    position: relative;
    height: 100%;
    width: 81%;
    background-color: #F9F9F9;
    border: 1px solid #bbbbbb;
    border-right-width: 0;
    margin-left: -1px;
     background-color:yellow;
    box-sizing:border-box;
}
.floatLeft{
    float: left;
}
.clear{
    clear:both;
}