Всем привет. Недавно начал увлекаться веб-дизайном, но поскольку опыта мало, то соответственно возникли некоторое проблемы. В общем идея сайта (на первых парах) была проста. Есть два горизонтальных flex-box'са. 1 блок отвечает за панель-меню, а 2 за основной контент. По задумке 1 блок с фиксированной шириной в 320px и высотой 100% (у body высота = 100vh), при нажатии на кнопку должен был отодвигаться влево, то есть фиксированная ширина по нажатию становилась равной 45px. При этом 2 блок должен был правильно с масштабироваться относительно свободного пространства. В принципе почитав о свойствах flex-box'са мне удалось что-то подобное реализовать. Но по каким-то не понятным мне причинам, высота блоков 1 и 2 начинает игнорироваться, если в любой из блоков вложить другой блок с высотой превышающую высоту видимой области экрана. Как бы высота вложенного блока меняется, но высота родителей остаётся неизменной. Что я только не пробовал, но решить проблему не удалось. Бьюсь уже 4 дня, а толку ноль. Может вы сможете подсказать, в чём заключается проблема. Исходный код html и css опубликованы чуть нижу + приклепана картинка, где визуально понятно, в чём проблема.
<body>
<div id="menu-front">
<div id="menu" onclick="check();"><img src="images/menu.png" width="45" height="45">Категории</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="Текст для поиска..." 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>
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;
}
Простой
Средний