首先得保证 双方的 父 盒子 是 flex的

  <div ref="flexContainer" class="flex-container">
    <div class="column"></div>
    <div class="column"></div>
  </div>  
  .flex-container {
    display: flex;
    padding: 10px;
    .column {
      max-width: 50%;
      padding: 10px;
      flex: 1;
      background: #fff;
      margin: 0 5px;
      align-items: stretch; // 拉伸
效果如下
 
 点击 123 按钮之后
 
                    首先得保证 双方的 父 盒子 是 flex的  &lt;div ref="flexContainer" class="flex-container"&gt;    &lt;div class="column"&gt;&lt;/div&gt;    &lt;div class="column"&gt;&lt;/div&gt;  &lt;/div&gt;    .flex-container {    display: flex;    padding: 10px;    .column {
想让两个div在一行展示，然后右边的div高度不定，想让左边的div高度跟随右边高度变化。
1、两个div在一行展示：设置两个div的样式 display: inline;
2、用一个div 包括上面两个div,在父级div中设置样式：display: flex;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;flex 嵌套 之 高度自适应&lt;/title&gt;
    &lt;style media="screen"&gt;
        body, htm
				
Flex布局是一种比较新的CSS布局方法，可以方便地实现页面布局的灵活性和自适应性。但是在使用Flex布局时，我们有时会遇到尺寸放大后盒子掉下来的问题。
这种情况通常出现在Flex容器的方向是水平方向，而Flex子元素的高度设置为百分比或者自适应高度时。在这种情况下，当Flex子元素的高度随着尺寸放大而超过容器的高度时，它会掉下来并且覆盖在下方的元素之上。
解决这个问题的方法有很多种，其中一种简单的方式是通过设置Flex子元素的max-height属性来限制子元素的高度，从而避免盒子掉下来的问题。另外，我们还可以调整Flex容器的高度或者使用Flex子元素的align-self属性来设置子元素垂直居中，以避免出现掉下来的情况。
总之，要避免使用Flex布局出现尺寸放大后盒子掉下来的问题，需要我们在设计布局时更加细心、灵活地设置Flex容器和Flex子元素的属性，充分发挥Flex布局的优势，实现更好的页面布局效果。