Flexbox高度增长问题

Question

我遇到的问题是，当我在Flexbox中输入内容时，它的高度会增加。我不是100%确定为什么会发生这种情况，但我相信这与它没有处于绝对位置，从而保持其高度属性有关。

包括代码笔，我在这里为我正在制作的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-我为Flexbox的每一“行”设置了另一个包装div，这样我就可以让它们在不同区域对齐（顶部是对齐的Flex Start，中心是对齐的Flex Center，底部是对齐的Flex Bottom）

3-2中心Flexbox（YouTube和关于）设置有绝对位置，所以我能够有“关于”部分生长出来，并重叠顶部和底部部分。

4-我有所有的flebox设置为%高度和宽度，所以它们会随着窗口值缩放。

5-在每个FlexBox部分的内部，我有一个容器，以便我可以操纵内容并将其移动，使其适合其父FlexBox。

现在，我不能100%确定所有嵌套和父/子元素是否是处理我正在尝试做的事情的最佳方式，但我无法以任何其他方式将其可视化并使其工作（在我正在做的方式之外）。

所以-再检查一遍，在“抽搐：面板我有一个<代码>

Answer 1

与%高度不同，您可能希望让flexbox为您处理高度，就像在“按设计方式增长到视口”中一样，但随后使用vh单位的最大高度，而不是%值（如最大高度：75vh，而不是最大高度：75%）。vh使用视口来缩放而不是父div。

Answer 2

您可以通过指定alignTop、alignCenter和alignBottom高度进行游戏。

http://codepen.io/anon/pen/GWEgMK：试着对你说的话进行评论，然后找出你满意的高度的适当值。

.alignTop {
  height:33%;}

.alignCenter {
  height:25%;}

.alignBottom {
  height:20%;}

不确定这正是你想要的，但要诚实，你的代码笔中有太多的混乱，我们真的不想尝试：）动画是否相关？