Относительная высота div с 100%

Question

Как установить высоту первого столбца для второго столбца и полосы прокрутки?

body,
html {
  height: 100%;
  width: 100%
}

body {
  background-color: #F4F5F9;
  font-size: 11px;
}

.menu-right {
  min-height: 100%;
  background: red;
  width: 20px;
  display: block;
  position: relative;
  direction: rtl;
  float: right;
  margin-left: 10px;
}

<div style="height:100%">
  <div class="menu-right">
    2
  </div>

  <div class="menu-right">
    sdsdsds
    <br /> sdsdsds
    <br /> . . //something such as sdsdsds . .
  </div>
</div>

Вывод:

Answer 1

Вместо с плавающей вправо, вы можете использовать флексбокс обратный ряд в качестве элемента оболочки.Поведение flexbox по умолчанию align-items: stretch будет растягиваться и соответствовать высотам - см. Демонстрацию ниже:

body,
html {
  height: 100%;
  width: 100%;
  margin: 0;
  background-color: #F4F5F9;
  font-size: 11px;
}

.wrapper {
  display: flex;
  flex-direction: row-reverse;
}

.wrapper>div {
  background: red;
  width: 100px;
  direction: rtl;
  margin-left: 10px;
}

<div class="wrapper">
  <div class="menu-left">
    sdsdsds
    <br /> sdsdsds
    <br /> sdsdsds
    <br /> sdsdsds
    <br /> sdsdsds
    <br /> sdsdsds
    <br /> sdsdsds
    <br /> sdsdsds
    <br /> sdsdsds
  </div>
  <div class="menu-right">
    sdsdsds
    <br /> sdsdsds
    <br /> sdsdsds
    <br /> sdsdsds
    <br /> sdsdsds
    <br /> sdsdsds
    <br /> sdsdsds
    <br /> sdsdsds
    <br /> sdsdsds
    <br /> sdsdsds
    <br /> sdsdsds
    <br /> sdsdsds
    <br /> sdsdsds
    <br /> sdsdsds
    <br /> sdsdsds
    <br /> sdsdsds
    <br /> sdsdsds
  </div>
</div>

Answer 2

добавить второй правый стиль div overflow-y:scroll и max-height:100%

body,html{height:100%;width:100%}
body{background-color:#F4F5F9;;font-size:11px}
.menu-right {
  min-height: 100%;
  background: red;
  width: 20px;
  display: block;
  position: relative;
  direction: rtl;
  float: right;
  margin-left: 10px;
  
}

<div style="height:100%">
    <div class="menu-right">
      2
    </div>
    <div class="menu-right" style="overflow-y:scroll; max-height:100%">
      sdsdsds
      <br />
      sdsdsds
      <br />
       .
       .
       //something such as sdsdsds
       .
       .
      </div>

</div>

Answer 3

Вы должны использовать flex box вместо float. добавьте класс в ваш внешний div как .container, установите для свойства отображения .container значение flex и align-items: stretch

body,html{height:100%;width:100%}
body{background-color:#F4F5F9;;font-size:11px}


.container {
  display: flex;
  align-items: stretch;
}

.menu-right {
  min-height: 100%;
  background: red;
  width: 20px;
  position: relative;
  direction: rtl;
  margin-left: 10px;
  flex: 0 0 20px;
  
}

<div class="container" style="height:100%">
    <div class="menu-right">
      2
    </div>

    <div class="menu-right">
      sdsdsds
      <br />
      sdsdsds
      <br />
       .
       .
       //something such as sdsdsds
       .
       .
      </div>
</div>