问题描述、问题出现的环境背景及自己尝试过哪些方法

我写出来的实际效果：https://codepen.io/piscdong/p...

左右两列布局，现在左侧橘黄色是浮动的，右侧上面红色部分里面有若干未知数量的白色浮动div
现在出现的问题是，右边红色部分，我原来希望能根据里面的内容自适应高度，但是现在好像强制和左侧一样高了
请问这种情况应该怎么改，谢谢

相关代码

html

<div class="top">
  <div class="left"></div>
  <div class="right">
    <div class="right_1">
      <div class="block"></div>
      <div class="block"></div>
      <div class="block"></div>
      <div class="block"></div>
    </div>
    <div class="right_2"></div>
  </div>
</div>
<div class="bottom"></div>

css

.top {
  background: #eee;
}
.top:after {
  content: '';
  display: block;
  clear: both;
}
.left {
  float: left;
  width: 200px;
  height: 200px;
  background: #f90;
}
.right {
  margin-left: 210px;
  background: #036;
}
.right_1 {
  background: #900;
}
.right_1:after {
  content: '';
  display: block;
  clear: both;
}
.block {
  float: left;
  width: 100px;
  height: 100px;
  margin: 5px;
  background: #fff;
}
.right_2 {
  height: 20px;
  background: #009;
}
.bottom {
  background: #ccc;
  height: 20px;
}

解决方法

感谢 @Haiiz 的回答，解决方法如下

css

.right {
  float: right;
  width: calc(100% - 210px);
  background: #036;
}

实际效果：https://codepen.io/piscdong/p...