html - Flexbox 高度增长问题

Question

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

包括 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 - 我为 Flexbox 的每个“行”都有另一个包装 div，所以我可以让它们在不同区域对齐(顶部对齐 Flex-Start，中心对齐 Flex-Center，底部对齐 Flex-Bottom)

3 - 2 个中心 Flexboxes(YouTube 和关于)设置为绝对位置，因此我能够让“关于”部分扩展并与顶部和底部部分重叠。

4 - 我将所有的 fleboxes 设置为 % 高度和宽度，这样它们将随着窗口值缩放。

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

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

所以 - 再看一遍，在“Twitch:面板中我有一个 <p> 部分，当我取消注释时，flexbox 的高度会增加，而不是保持不变。但是，在“关于”中部分，这不会发生。我能看到的唯一区别是“关于”部分是 position: absolute。

Answer 1

您可以通过指定 alignTop、alignCenter 和 alignBottom 高度来尝试。

http://codepen.io/anon/pen/GWEgMK :尝试评论你所说的话，然后找到你满意的高度的适当值。

.alignTop {
  height:33%;}

.alignCenter {
  height:25%;}

.alignBottom {
  height:20%;}

不确定这正是您想要的，但老实说，您的 codepen 中有太多杂乱的东西让我们真的不想尝试 :) 动画是否相关？