flex 布局存在 height 的时候改变父元素的布局方向导致的问题?

mikechen
  • 711
<!--
 * @Version: 2.0
 * @Date: 2021-10-13 09:20:10
 * @LastEditTime: 2021-12-01 19:08:04
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    .parent {
      display: flex;
      width: 500px;
      height: 500px;
      flex-direction: row;
      background: #fff;
    }
    .left {
      flex: 1 0 auto;
      height: 100px;
      background: blue;
    }
    .right {
      flex:1 1;
      background: red;
    }
  </style>

  <body>
    <div class="parent">
      <div class="left"></div>
      <div class="right"></div>
    </div>
  </body>
</html>

parent 布局方向 为 row 的时候显示正确
image.png

当我把 parent 的布局方向改成 column的时候 显示高度就不正确了:
image.png

除了动态的把 left的 flex 设置为 0 1 auto
是否还有其他方法 能让 left 的高度正确显示

期待的效果
image.png

回复
阅读 794
2 个回答

你是想水平方向各占一半,竖直方向blue只占100px?

.parent {
      display: flex;
      width: 500px;
      height: 500px;
      flex-direction: row; /* 只需改方向,无需再改其他 */
      background: #fff;
    }
    .left {
      flex: 0 0 50%;
      max-height: 100px;
      background: blue;
    }
    .right {
      flex:1;
      background: red;
    }
        .parent {
            display: flex;
            width: 500px;
            height: 500px;
            flex-direction: column;
            background: #fff;
        }
        .left {
            /* flex: 0 1 auto; */
            height: 100px;
            background: blue;
        }
        .right {
            flex: 1;
            /* flex: 1 1; */
            background: red;
        }
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏