我遇到的问题是当我在其中输入内容时，我的Flexbox的高度越来越高。我不是百分之百确定为什么会发生这种情况，但我认为它与它没有处于绝对位置并因此保持其高度属性有关。
包括CodePen我在哪里为我正在制作的Flexbox风格网站设置了HTML和CSS（还包括下面的代码段）以下是关于它的信息
body p {
color: white;
font-size: 30px;
margin-top: 10px !important; }
.home-wrap {
display: flex;
min-height: 100vh;
justify-content: center;
transition: background 1.5s ease-in-out; }
.home-sections {
display: flex;
flex-direction: row;
flex-wrap: wrap;
min-width: 775px;
max-width: 775px; }
.home-sections section {
border-radius: 20px;
border: 3px solid white;
overflow: hidden; }
.home-sections .flex {
display: flex;
flex-direction: row; }
.home-sections .flex--center {
justify-content: center; }
.col-1 {
text-align: center; }
.alignTop {
display: flex;
flex-direction: row;
flex-wrap: wrap;
min-width: 100%;
align-items: flex-start;
transition: opacity 1.5s ease-in-out; }
.alignCenter {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
position: relative;
width: 50%; }
.alignBottom {
display: flex;
flex-direction: row;
flex-wrap: wrap;
min-width: 100%;
align-items: flex-end;
transition: opacity 1.5s ease-in-out; }
section.about {
position: absolute;
width: 100%;
height: 220%;
left: 100%;
box-shadow: -6px 6px 8px rgba(0, 0, 0, 0.6);
z-index: 1;
transition: transform 1.5s ease-in-out;
animation: enticing-grow 2s 2;
background-color: #CB7E15; }
section.about .displayB {
display: block;
text-align: center; }
section.about .displayB h1 {
margin-top: 10px;
text-align: center;
font-size: 30px;
text-shadow: 5px 5px 8px white; }
section.about .displayB p {
font-size: 16px; }
section.about .mike-faq {
display: flex;
opacity: 0;
flex-direction: row;
justify-content: space-around;
flex-wrap: wrap;
max-width: 100%;
transition: all 1.5s ease-in-out; }
section.setup {
width: calc(55% - 6px);
height: 80%;
box-shadow: -8px 8px 8px rgba(0, 0, 0, 0.6);
background-color: #004EFF; }
section.social {
width: calc(45% - 6px);
height: 55%;
box-shadow: 8px 8px 8px rgba(0, 0, 0, 0.6);
opacity: 0.5;
transition: all 1s ease-in-out;
background-color: #585656; }
section.social:hover {
opacity: 1;
transform: scale(1.5);
z-index: 2; }
section.social .displayB {
display: block; }
section.social .displayB p {
text-align: center;
margin: 10px; }
section.social .social-wrap {
display: flex;
flex-direction: row;
max-width: 100%;
justify-content: space-around; }
section.social .social-wrap .twitter-logo {
background-image: url(/assets/img/twitter-logo.gif);
background-size: contain;
width: 55px;
height: 55px;
box-shadow: 0 5px 20px 0 #1DA1F2; }
section.social .social-wrap .email-logo {
background-image: url(/assets/img/gmail-logo.png);
background-size: contain;
width: 55px;
height: 55px;
box-shadow: 0 5px 20px 0 #E70F10; }
section.social .social-wrap .facebook-logo {
background-image: url(/assets/img/facebook-logo.png);
background-size: contain;
width: 55px;
height: 55px;
box-shadow: 0 5px 10px 5px #3C5A98; }
section.social .social-wrap .github-logo {
background-image: url(/assets/img/github-logo.png);
background-size: contain;
width: 55px;
height: 55px;
box-shadow: 0 5px 20px 0 #E04006; }
section.twitch {
width: calc(55% - 6px);
height: 80%;
box-shadow: -8px -8px 8px rgba(0, 0, 0, 0.6);
background-color: #5A3E85; }
section.twitch h1 {
margin-top: 10px;
font-size: 30px;
text-align: center; }
section.twitch p {
font-size: 16px; }
section.twitch .displayB {
display: block;
text-align: center; }
.button {
color: #5A3E85; }
section.webdesign {
width: calc(45% - 6px);
height: 53%;
box-shadow: 8px -8px 8px rgba(0, 0, 0, 0.6);
background-color: #1F843A; }
section.youtube {
position: absolute;
width: 95%;
height: 140%;
margin-right: 5px;
box-shadow: -8px 0 8px rgba(0, 0, 0, 0.6);
transition: opacity 1.5s ease-in-out;
background-color: #CC181E; }<div class="home-wrap">
<div class="home-sections">
<div class="alignTop">
<section class="twitch">
<div class="flex flex--center displayB">
<h1>Twitch</h1>
<!-- <p>I've been livestreaming on Twitch since it's days as Justin.tv - I plan to pick it back up again once I can figure out a schedule</p> -->
</div>
</section>
<section class="webdesign">
<div class="flex flex--center">
<p>Web Design</p>
</div>
</section>
</div>
<div class="alignCenter">
<section class="youtube">
<div class="flex flex--center">
<P>YouTube</P>
</div>
</section>
<section class="about grown">
<div class="flex flex--center displayB">
<h1>What's Going on, Mike here, and Welcome to my Site!</h1>
<p>I'm your typical 26 year old nerd, who loves computers, video games, pretty much anything tech. Along with that, I have a ton of hobbies that range from playing music to stock investments. </p>
<p>I've always been interested in, and worked on my web design skills, but it wasn't until the past few months where I decided this is what I am passionate about.</p>
<p>With that said, click around the site to learn more about me. All panels are expandable clickable which will allow you to learn more about "Mike" and who I am!</p>
<div class="mike-faq">
<p>FAQ 1</p>
<p>FAQ 2 </p>
<p>FAQ 3</p>
<p>FAQ 4</p>
</div>
</div>
</section>
</div>
<div class="alignBottom">
<section class="setup">
<div class="flex flex--center">
<p>Setup</p>
</div>
</section>
<section class="social">
<div class="flex flex--center displayB">
<p>Social</p>
<div class="social-wrap">
<div class="twitter-logo"></div>
<div class="email-logo"></div>
<div class="facebook-logo"></div>
<div class="github-logo"></div>
</div>
</div>
</section>
</div>
</div>
1 - 我在网站内容周围有一个包装div，所以我可以控制背面的流量和背景
2 - 我为每个＆＃34; Row＆＃34; Flexbox所以我可以让它们在不同区域对齐（顶部是对齐Flex-Start，中心是对齐Flex-Center，底部是Flex-Bottom对齐）
3 - 2个中央Flexbox（YouTube和关于）设置为绝对位置，因此我可以拥有＆＃34;关于＆＃34;部分长出并重叠顶部和底部。
4 - 我将所有的行李箱设置为％高度和宽度，以便它们随窗口值缩放。
5 - 在每个FlexBox部分的内部，我有一个容器，以便我可以操作内容并移动它，使其适合其父Flexbox。
现在，我不是百分百确定是否所有嵌套和父/子元素都是处理我想要做的事情的最佳方式，但我还没有能够以任何其他方式将其可视化并获得它工作（我在做的方式之外）。
所以 - 重新审视一遍，在＆＃34; Twitch：面板中我有一个<p>部分，当我取消注释时，flexbox会增加高度，而不是保持不变。然而，在＆＃34;关于＆＃34;部分，这没有发生。我能看到的唯一区别是＆＃34;关于＆＃34;部分是position: absolute。
答案 0 :(得分：0)
你可以通过提高alignTop, alignCenter and alignBottom高度来玩。
http://codepen.io/anon/pen/GWEgMK：尝试评论你所说的内容然后找到你满意的高度值。
.alignTop {
height:33%;}
.alignCenter {
height:25%;}
.alignBottom {
height:20%;}
不确定这正是你想要的，但是要确保你的代码中有太多杂乱的东西让我们真的想尝试:)动画是否甚至相关？
答案 1 :(得分：0)
而不是％高度你可能想让flexbox为你处理高度，就像增长到视口一样，但是然后使用带有vh单位的最大高度而不是％值（如最大值） - 高度：75vh而不是最大高度：75％）。 vh使用视口来缩放父div。