css - 为什么改变 flex 方向会改变 child 的高度？

Question

我正在尝试使用 Flexbox 进行媒体查询以在另一个下方而不是在您这一边显示一个输入。如您所见，使用我当前的代码，我得到了这个:

但是如果我把flex-direction改成column，输入的宽度就不是原来的宽度了。这是结果:

这是我的 HTML:

<div id="mc_embed_signup">
  <form action="//eliasgarcia.us8.list-manage.com/subscribe/post?u=55cf7078733f0b62eb97733e3&amp;id=ace40b1824" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
    <div id="mc_embed_signup_scroll">
      <label for="mce-EMAIL">No te pierdas ningún artículo</label>
      <div class="mc-wrapper">
        <input type="email" value="" name="EMAIL" id="mce-EMAIL" placeholder="Correo electrónico" required>
        <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
        <div style="position: absolute; left: -5000px;" aria-hidden="true">
          <input type="text" name="b_55cf7078733f0b62eb97733e3_ace40b1824" tabindex="1" value="">
        </div>
        <div>
          <input type="submit" value="Suscríbete" name="subscribe" id="mc-embedded-subscribe" class="button">
        </div>
      </div>
      <div class="mc-error">
      </div>
    </div>
  </form>
</div>

这是我的 CSS:

#mc_embed_signup {
  label {
    font-size: 2em;
    font-weight: bold;
    display: block;
    text-align: center;
  }
  .mc-wrapper {
    display: flex;
    justify-content: space-between;
    padding: 30px 0px 0px 0px;
  }
  #mce-EMAIL {
    width: 100%;
    margin: 0px 30px 0px 0px;
    border: 2px solid $medium-grey;
    border-radius: 4px;
    text-indent: 20px;
  }
  .button {
    margin: 0px auto;
    cursor: pointer;
  }
}

为什么会这样？

注意:我无法提供 Fiddle，因为这是与 MailChip 的集成，所以它调用了一个 JS 脚本，但它在 Fiddle 上无法正常工作，我不知道为什么......但脚本没有添加任何额外的类，只有上面的类。

Answer 1

具有flex-direction: row(display: flex 的默认值)的 flex 父级的 flex 子级将具有相同的高度。因此，由于您的左侧 input 是 .mc-wrapper 的直接子级，因此它的高度将等于它旁边的元素的高度，这将导致 input 的高度增长，因为右边的 flex child 更高。

当您切换到 flex-direction: column 时，您不再有连续的相邻子项，并且 flexbox 不会尝试匹配高度，因此 input将是自然的任何高度。