Как вы можете видеть в CSS, .content-container имеет высоту 100vw, если я изменю его на 100vh, тогда flex:1 внутри .home, .about, .skills и .contact won 'не работает, но при использовании 100vw как высота, flex:1 работает, но фиксированная боковая панель больше не остается фиксированной.
Это происходит из-за flex-flow: column nowrap на .content-container?
Нет. Это происходит потому, что вы возитесь с высотой по разным осям, когда вам даже не нужно добавлять высоту (пояснение ниже), и потому что вы сталкиваетесь с алгоритмом гибкого минимального размера.
КогдаВы используете 100vw, высота .content-container относительно ширины области просмотра ("ширина области просмотра"). Это сбрасывает высоту относительно фактической высоты контейнера. В более широком окне просмотра будет больше высоты, но flex: 1 все равно не сможет сделать каждый элемент равным по высоте (пояснение ниже). Кроме того, при уменьшении области просмотра .content-container будет постепенно исчезать (поскольку высота vw продолжает уменьшаться).
Когда вы используете 100vh, высота .content-container относительно высотыобласти просмотра ("высота области просмотра"). Ваши дочерние элементы по-прежнему не будут равны по высоте с flex: 1 (пояснение ниже).
По сути, в обоих случаях (vw и vh) flex: 1 не удается достичь вашей цели. Это связано с тем, что элементы flex не могут быть меньше их содержимого вдоль главной оси . По умолчанию для контейнеров в направлении столбца min-height: auto. Вам необходимо переопределить это значение по умолчанию с помощью min-height: 0 или overflow любым значением, отличным от видимого.
Кроме того, поскольку настройка по умолчанию для элементов Flex составляет align-items: stretch, вам не нужноНужно добавить высоту к .content-container. Он автоматически расширится по всей высоте контейнера.
var myDate = new Date();
var hrs = myDate.getHours();
var greet;
if (hrs < 12)
greet = 'Good Morning';
else if (hrs >= 12 && hrs <= 17)
greet = 'Good Afternoon';
else if (hrs >= 17 && hrs <= 24)
greet = 'Good Evening';
document.getElementById('greet').innerHTML =
greet + ', visitor! <br><br> Welcome.';
.container {
display: flex;
height: 100vh;
}
.sidebar {
flex: 0 0 25%;
background-color: #bbbbeb;
display: flex;
flex-flow: column;
padding: 10px;
}
.logo {
text-align: center;
font-weight: bold;
}
.navbar {
margin: auto;
}
.content-container {
flex: 0 0 75%;
display: flex;
flex-flow: column nowrap;
text-align: center;
overflow: auto;
/* height: 100vh */
}
section {
padding: 10px;
}
.home {
background-color: red;
flex: 1;
min-height: 0; /* new */
}
.about {
background-color: orange;
flex: 1;
overflow: hidden; /* new */
}
.skills {
background-color: orangered;
flex: 1;
overflow: auto; /* new */
}
.contact {
background-color: crimson;
flex: 1;
min-height: 0; /* new */
}
li {
list-style: none;
margin: 10px 0;
text-align: center;
}
a {
color: black;
display: inline-block;
padding: 2px;
text-decoration: none;
}
a:hover {
transform: scale(1.2);
font-weight: bold;
border-bottom: 3px solid black;
text-shadow: 1px 1px 2px rgb(122, 71, 122);
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Comfortaa', sans-serif;
font-size: 1.4em;
}
<div class="container">
<section class="sidebar">
<div class="logo"><a href="#home"><logo></a></div>
<nav class="navbar">
<ul class="nav-links">
<li><a href="#home">home</a></li>
<li><a href="#about">about me</a></li>
<li><a href="#skills">skills</a></li>
<li><a href="#contact">contact</a></li>
</ul>
</nav>
</section>
<main class="content-container">
<section class="home" id="home">
<h2 id="greet"></h2>
</section>
<section class="about" id="about">
<h2>ABOUT</h2>
<h3>
<span>Name</span>
</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</section>
<section class="skills" id="skills">
<h2>SKILLS</h2>
<h3>Lorem ipsum dolor sit amet.</h3>
<ul class=tech-skills>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<h3>Lorem</h3>
<ul class="languages">
<li>1</li>
<li>2</li>
</ul>
<h3>Lorem, ipsum.</h3>
<ul class="learning-skills">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</section>
<section class="contact" id="contact">
<h2>CONTACT</h2>
<p>handle</p>
<p>phone</p>
<p>email</p>
</section>
</main>
</div>