How to arrange a zooming content when using Flex-box sa?

Hi all. Recently started to get into web design, but because of little experience, respectively, there was some problem. In General, the idea of the site (the first couple) was simple. There are two horizontal flex-box sa. 1 unit is responsible for the bar menu and 2 for the main content. On the idea of 1 block with a fixed width in 320px and a height of 100% (at body height = 100vh), clicking the button had to move back to the left, that is, a fixed width depression has become equal to 45px. This 2 unit was correctly scaled relative to free space. In principle, after reading about the properties of the flex-box sa, I managed something similar to implement. But for some not clear reason to me, the height of the units 1 and 2 begins to be ignored, if any of the blocks to put another block with a height exceeding the height of the visible area of the screen. How would the height of a nested block changes, but the height of the parents remains unchanged. I only did not try, but to solve the problem failed. I already 4 days and nothing. Maybe you can tell what the problem is. The source code of the html and css posted slightly lower + riveted the picture is visually clear what the problem is.


 <div id="menu-front">
 <div id="menu" onclick="check();"><img src="images/menu.png" width="45" height="45">Categories</div>
</div>

 <div id="content">
 <div id="hapka-top">
 <a href="#" id="logotip">Logo</a> 

 <div id="hBlock-top">
 <div id="searche">
 <input type="text" value="Text to search..." onfocus="this.value="">
 <img src="images/search-icon.png" width="25" height="25">
</div>

 <div id="login">

</div>
</div>
</div>

 <div id="hapka-center"></div>
</div>


body{
 margin: 0px;
 padding: 0px;

 display: flex;
 overflow-x: hidden;
 height: 100vh;
}

#menu-front{
 display: flex;
 flex: 0 0 auto;
 flex-direction: column;
 width: 320px;
 height: 100%;
 background: #58C2FE;
 -webkit-user-select: none;
}

#content{
 display: flex;
 flex-direction: column;
 flex: 1 1 auto;
 background: #FFE7BF;
}

#menu{
 display: flex;
 align-items: center;
 height: 55px;
 max-width: 100%;
 min-width: 190px;
 background: #00B0F7;
 text-shadow: #000000 0 0 20px;
 font-family: 'open-sans-light';
 color: White;
 cursor: pointer;
}

#hapka-top{
 display: flex;
 align-items: center;
 justify-content: space-between;
 flex: 0 0 auto;
 height: 55px;
 width: 100%;
 background: #B5EB69;
 -webkit-user-select: none;
}

#logotip{
 font-family: 'Bariol_Bold';
 font-size: 30px;
 text-decoration: none;
 margin-left: 15px;
 margin-right: 15px;
 color: #548859;
}

#hBlock-top{
 display: flex;
 flex: 0 0 auto;
 align-items: center;
 justify-content: space-between;
 height: 100%;
 width: 400px;
 margin-left: 15px;
 margin-right: 5px;
 overflow: hidden;
}

#searche{
 display: flex;
 align-items: center;
 height: 80%;
 width: 260px;
 border-radius: 4px 0px 0px 4px;
 background: #D8FFA2;
}

#searche input{
 flex: 1 1 auto;
 font-family: 'open-sans-light';
 margin-left: 5px;
 height: 70%;
 color: #999999;
 text-align: center;
 border: none;
 border-radius: 4px;
 padding: 0px 4px 0px 4px;
}

#searche input:focus{
 text-align: left;
 outline: none;
 color: #000000;
}

#searche img{
 flex: 0 0 auto;
 margin-left: 5px;
 margin-right: 5px;
 cursor: pointer;
}

#login{
 display: flex;
 flex: 1 0 auto;
 align-items: center;
 margin-left: 1px;
 height: 80%;
 background: #D8FFA2;
}

#hapka-center{
 flex: 0 0 auto;
 height: 1000px;
 width: 100%;
 background: black;
}


5afe50da456a1456960938.png
June 5th 19 at 21:20
1 answer
June 5th 19 at 21:22
You have a parent standing height 100 viewport height, and a child 1000px. It will stretch, and the height will still 100vh. Offer the left sidebar menu to make

position: fixed;
left: 0;
top: 0;
width: 320px;
height: 100vh

She will always be the height of the screen. Right block shift width of the menu. Now it can stretch to infinity.

transform: translateX(320px)

Here is the result
https://jsfiddle.net/ouodkeLn/25/

Do not set the height of images in HTML code. All in CSS :

#menu img {
 width: 45px;
 height: 45px;
}


The same applies to event handlers. All this bad taste. Learn to make beautiful )
Thank you for the simple and accurate answer!) - adolph.Ber commented on June 5th 19 at 21:25
I hasten to disappoint you... it Works through one place, so to speak... All because of the fact that we just push block 2 to 320px on the side, respectively, the page increases in length by +320px, respectively, appears lower scrolling and the content is compacted in the side... - adolph.Ber commented on June 5th 19 at 21:28
While the issue decided by the fact that the task dynamic width is due to js. But I think that is the farm. - adolph.Ber commented on June 5th 19 at 21:31
Excuse me - not spotted ) Here, corrected. Did wrong the displacement of the container, it was necessary to define internal 320 indent (plus indent for beauty). For example, if you have a diva everywhere indented 20 pixels, the left margin will be 340.

https://jsfiddle.net/t04z32dp/1/ - Frederick.Gislason40 commented on June 5th 19 at 21:34

Find more questions by tags CSSHTMLFlexbox