フレックス方向を変更すると、子供の高さが変わるのはなぜですか？

Question

私は、Flexboxを使用してあなたの側に入力の代わりに入力を表示するメディアクエリを作成しようとしています。

をしかし、私はflex-directioncolumnに変更した場合、入力幅は、オリジナルではありません。あなたが見ることができるように、私の現在のコードで、私はこれを取得しています。これが結果です：

これが私の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; 
    } 
} 

なぜこの出来事はありますか？

注：これはMailChipとの統合であるため、私はFiddleを提供することができないため、JS Scriptを呼び出し、Fiddleでは正常に動作しません。なぜか...スクリプトは上のクラスだけを追加してください。

Answer 1

flex-direction: row（デフォルトはdisplay: flex）のフレックスのフレックスの子は、同等の高さになります。したがって、あなたの左のinputは.mc-wrapperの直接の子であるため、高さはその横のアイテムの高さに等しくなり、右のフレックスチャイルトが高くなるのでinputの高さが増加します。

flex-direction: columnに切り替えると、隣接する子が連続しなくなり、フレックスボックスは高さの一致を試みませんので、inputは自然な高さになります。