-2

How can I make all the elements have the same height without needing to define a static height?

[1]

http://jsfiddle.net/o5fjsgur/

    <div class="row">
      <div class="col-sm-12 col-md-5 flex-center" style="border:1px solid red;">
        <div class="md-form">
            <select class="browser-default custom-select" mdbInput mdbValidate   >
                <option   >CAMBIARR esta joda</option>
            </select>
        </div>
      </div>
      <div class="col-sm-12 col-md-1 flex-center" style="border:1px solid red;height: 100%;">
        <div style="height: 100%;">
          holi
        </div>
      </div>
      <div class="col-sm-12 col-md-5" style="border:1px solid red;">
        <div class="md-form m-0 p-0 flex-center mt-3">
            <div class="form-check">
              <input type="radio" class="form-check-input" id="creacion" name="creacion_soporte" mdbInputDirective>
              <label class="form-check-label" for="creacion">Creación</label>
            </div>
            <div class="form-check" >
              <input type="radio" class="form-check-input" id="soporte" name="creacion_soporte" mdbInputDirective>
              <label class="form-check-label" for="soporte">Soporte</label>
          </div>
        </div>
      </div>
    </div>
yavg
  • 2,761
  • 7
  • 45
  • 115
  • Possible duplicate of [How can I make Bootstrap columns all the same height?](https://stackoverflow.com/questions/19695784/how-can-i-make-bootstrap-columns-all-the-same-height) – Vanojx1 Dec 24 '18 at 16:37
  • The fiddle is using Bootstrap 4 alpha, not the latest Bootstrap 4. The alpha version doesn't use flexbox. – Carol Skelly Dec 25 '18 at 12:36

1 Answers1

2

If you use flex-box, or if you use Bootstrap 4 with the new grid system (see https://getbootstrap.com/docs/4.2/layout/grid/), which uses flex-box, you'll get the expected results. height: 100% has no effect on a floating element.

See http://jsfiddle.net/8d9Lxemb/

Gabriel
  • 2,170
  • 1
  • 17
  • 20