Vahe Vahe - 3 months ago 7
CSS Question

How do I make two side by side buttons with margin in between have a total width equal to the precedding text input (100% width)?

I am trying to make two buttons scale appropriately with in between margin responsive design.

How do I properly specify width of each button with the margin to stay constant in between?

Equal width buttons are below that I am trying to scale together, without exceeding the total width.

|--------------------100%------------------------|
|---Button 1---||--margin in px--||---Button 2---|


Here is what I have so far..

button1.back-btn {
@include btn-inline;
}
button2.next-btn {
@include btn-inline;
}

@mixin btn-inline{
width: calc(50% - $form-control-spacing/2 - $border-btn-width*2);
width: -webkit-calc(50% - $form-control-spacing/2 - $border-btn-width*2);
width: -moz-calc(50% - $form-conrol-spacing/2 - $border-btn-width*2);
display: inline-block;
}

Answer

Flexbox can do that.

* {
  box-sizing: border-box;
}
.wrap {
  width: 80%;
  margin: 1em auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  border: 1px solid pink;
}
.wide {
  flex: 0 0 100%;
}
button:first-of-type {
  margin-right: 2em;
}
button {
  flex: 1;
}
<div class="wrap">
  <input class="wide" type="text" />
  <button>Button 1</button>
  <button>Button 2</button>
</div>