CODEWITHSUNDEEP
cssflexbox
Elias Garcia
Elias Garcia

Reputation: 7282

Why changing flex direction changes the child height?

I'm trying to make a media query to display an input below the other instead on your side using Flexbox. As you can see, with my current code, I'm getting this:

enter image description here

But if I change the flex-direction to column, the input width is not the original. This is the result:

enter image description here

This is the my 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>

And this is my 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;
  }
}

Why is this happening?

NOTE: I can't provide a Fiddle because this is an integration with MailChip, so it calls a JS Script and it's not working properly on Fiddle, I don't know why... But the script doesn't add any extra classes, only the ones above.

Upvotes: 6

Views: 8180

Answers (5)

Carnaru Valentin
Carnaru Valentin

Reputation: 1855

You must change just "align-items". I have this HTML case:

<section>
    <hgroup>
        <h1>Our Products</h1>
        <h3>We build all kind of containers</h3>
        <p>Lorem Ipsum is simply dummy text of the printing..</p>
    </hgroup>
    <button class="full-color pull-right">View All Products</button>
</section>

...and the CSS is like that:

section {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

Now input height is same as hgroup But, if I add to the section: align-items: baseline; the input height is like you expected. You must avoid:

align-items: inherit/unset/stretch/initial/normal

Upvotes: 0

Roysh
Roysh

Reputation: 1550

Add 

flex-flow: wrap;

This way, the height will remain as it. display: flex; won't affect it

Upvotes: 0

MikeVelazco
MikeVelazco

Reputation: 905

IMPORTANT There is a style called align-items which by default is stretch. This is what it makes the elements width/height to match it's parents depending on flex-direction.

For anyone getting here, this might be useful: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Upvotes: 1

Amir Jafari
Amir Jafari

Reputation: 19

You just need to add flex-flow: wrap-reverse to the flex parent and then everything goes well :)

example:

.parent {
  display:flex;
  flex-direction: column-reverse;
  flex-flow: wrap-reverse;
}

Good Luck

Upvotes: -2

Michael Coker
Michael Coker

Reputation: 53674

The flex children of a flex parent with flex-direction: row (the default for display: flex) will be equal heights. So since your left input is a direct child of .mc-wrapper, it's height will be equal to the height of the item beside it, and that will cause the input's height to grow since the flex child on the right is taller.

When you switch to a flex-direction: column you no longer have adjacent children in a row, and flexbox will not try to match the heights, so the input will be whatever height it is naturally.

Upvotes: 6

Related Questions