为啥flex横向布局的子元素高度100%生效了但是却被子元素撑开了？而且overflow不生效？

发布于
2022-02-11 北京

新手上路，请多包涵

flex纵向布局里面嵌套flex横向布局，为啥flex横向布局的子元素高度100%生效了但是却被子元素撑开了？而且overflow不生效？

代码:

<!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>
    <style>
      *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      .column{
        display: flex;
        flex-direction: column;
        height: 500px;
        width: 100vw;
        border: 3px solid blue;
      }
      .btm{
        flex: 1;
        box-sizing: border-box;
        display: flex;
        border: 3px solid red;
      }
      .left, .right{
        width: 50%;
        height: 100%;
        background-color: rgba(0, 5, 5, 0.3);
      }
      .left{
        border-right: 1px solid green;
        display: flex;
        flex-direction: column;
      }
      .title{
        background-color: aquamarine;
      }
      .content{
        height: 100%;
        overflow: auto;
      }
    </style>
</head>
<body>
  <div class="column">
    <div class="top">
      <div class="title">大标题</div>
    </div>
    <div class="btm">

      <div class="left">
        <div class="title">小标题</div>
          <div class="content">
            flex纵向布局里面嵌套flex横向布局，为啥flex横向布局的子元素高度100%生效了但是却被子元素撑开了？而且overflow不生效？
            flex纵向布局里面嵌套flex横向布局，为啥flex横向布局的子元素高度100%生效了但是却被子元素撑开了？而且overflow不生效？
            flex纵向布局里面嵌套flex横向布局，为啥flex横向布局的子元素高度100%生效了但是却被子元素撑开了？而且overflow不生效？
            flex纵向布局里面嵌套flex横向布局，为啥flex横向布局的子元素高度100%生效了但是却被子元素撑开了？而且overflow不生效？
            flex纵向布局里面嵌套flex横向布局，为啥flex横向布局的子元素高度100%生效了但是却被子元素撑开了？而且overflow不生效？
            flex纵向布局里面嵌套flex横向布局，为啥flex横向布局的子元素高度100%生效了但是却被子元素撑开了？而且overflow不生效？
            flex纵向布局里面嵌套flex横向布局，为啥flex横向布局的子元素高度100%生效了但是却被子元素撑开了？而且overflow不生效？
            flex纵向布局里面嵌套flex横向布局，为啥flex横向布局的子元素高度100%生效了但是却被子元素撑开了？而且overflow不生效？
            flex纵向布局里面嵌套flex横向布局，为啥flex横向布局的子元素高度100%生效了但是却被子元素撑开了？而且overflow不生效？
            flex纵向布局里面嵌套flex横向布局，为啥flex横向布局的子元素高度100%生效了但是却被子元素撑开了？而且overflow不生效？
          </div>
      </div>
      <div class="right"></div>

    </div>
  </div>
    
</body>
</html>

效果图：

我想要的是横向布局左半块的文字内容超出就滚动，但是滚动没生效，有知道原因的吗？

css3 flex

阅读 5.3k

3 个回答

得票最新

Sure

7811212

发布于
2022-02-11

✓ 已被采纳

<!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>
        <style>
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            .column {
                display: flex;
                flex-direction: column;
                height: 500px;
                width: 100vw;
                border: 3px solid blue;
            }
            .btm {
                flex: 1;
                box-sizing: border-box;
                display: flex;
                border: 3px solid red;
                overflow: hidden;
            }
            .left,
            .right {
                width: 50%;
                height: 100%;
                background-color: rgba(0, 5, 5, 0.3);
            }
            .left {
                border-right: 1px solid green;
                display: flex;
                flex-direction: column;
            }
            .title {
                background-color: aquamarine;
            }
            .content {
                height: 100%;
                overflow: auto;
            }
        </style>
    </head>
    <body>
        <div class="column">
            <div class="top">
                <div class="title">大标题</div>
            </div>
            <div class="btm">
                <div class="left">
                    <div class="title">小标题</div>
                    <div class="content">
                        flex纵向布局里面嵌套flex横向布局，为啥flex横向布局的子元素高度100%生效了但是却被子元素撑开了？而且overflow不生效？
                        flex纵向布局里面嵌套flex横向布局，为啥flex横向布局的子元素高度100%生效了但是却被子元素撑开了？而且overflow不生效？
                        flex纵向布局里面嵌套flex横向布局，为啥flex横向布局的子元素高度100%生效了但是却被子元素撑开了？而且overflow不生效？
                        flex纵向布局里面嵌套flex横向布局，为啥flex横向布局的子元素高度100%生效了但是却被子元素撑开了？而且overflow不生效？
                        flex纵向布局里面嵌套flex横向布局，为啥flex横向布局的子元素高度100%生效了但是却被子元素撑开了？而且overflow不生效？
                        flex纵向布局里面嵌套flex横向布局，为啥flex横向布局的子元素高度100%生效了但是却被子元素撑开了？而且overflow不生效？
                        flex纵向布局里面嵌套flex横向布局，为啥flex横向布局的子元素高度100%生效了但是却被子元素撑开了？而且overflow不生效？
                        flex纵向布局里面嵌套flex横向布局，为啥flex横向布局的子元素高度100%生效了但是却被子元素撑开了？而且overflow不生效？
                        flex纵向布局里面嵌套flex横向布局，为啥flex横向布局的子元素高度100%生效了但是却被子元素撑开了？而且overflow不生效？
                        flex纵向布局里面嵌套flex横向布局，为啥flex横向布局的子元素高度100%生效了但是却被子元素撑开了？而且overflow不生效？
                    </div>
                </div>
                <div class="right"></div>
            </div>
        </div>
    </body>
</html>

半橙汁

22323049

发布于
2022-02-11

更新于
2022-02-11

为使 overflow 有效果，块级容器必须有一个指定的高度（height或者max-height）或者将white-space设置为nowrap。---参考MDN-overflow

问题的关键点在：

.content{
        height: 100%; // 修改成指定高度即可~😉
        overflow: auto;
      }

有问题先看看文档~😁

hfhan

29k72241

发布于
2022-02-11

给btm设置height:0，或者设置overflowe:hidden/auto

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

为啥flex横向布局的子元素高度100%生效了但是却被子元素撑开了？而且overflow不生效？

flex纵向布局里面嵌套flex横向布局，为啥flex横向布局的子元素高度100%生效了但是却被子元素撑开了？而且overflow不生效？

你尚未登录，登录后可以

纯css如何绘制一个无背景色有边框色，带有文字的倒等腰梯形？

如何实现从一个div中拖拽dom到另一个div容器？

css3如何实现这样的圆环效果?

图片沿着圆环的转动有什么方法吗？

点击dom节点里面的子元素，如何点击的是某个节点？

flex相关 flex: 1的子元素如何宽度能100%且不溢出？

如何用 CSS 实现卡片顶部内凹效果？