[Vuejs]-Why is are my inputs not taking up the full width with of my flexbox container

by

1👍

✅

There is a gap because you specified a width:90% on inputs but their containers do not care about that, thei just fill their flex parent’s width. Input element’s width is always tricky anyway.

What you can do:

  • Remove width rule on inputs
  • On __input-box remove the flex-grow rule, set flex: 0 1 33% to limit the width (and create gaps) and remove the align-items rule so the inputs are stretched
  • Set justify-content: space-between on __input-row

Like:

&__input-row {
  width: 100%;
  height: 25%;
  display: flex;
  align-items: center;
  justify-content: space-between;

  &__input-box {
    height: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    flex: 0 1 33%;

    & label {
      font-size: 1.5rem;
      margin-bottom: 1.5rem;
    }

    & input {
      height: 3rem;
      padding: 1.5rem;
      font-size: 3rem;
      border: 0.15rem solid #e51010;
    }
  }
}

Here is an edited example: https://codepen.io/rndmerle/pen/jObeaMV

Leave a comment