旧文章从语雀迁移过来，原日期为2022-02-22

我们经常使用flex:1来动态分配父容器剩余空间，这时候如果要在容器上增加滚动条，使用overflow: auto可能会失效。

原因：

一般原因：因为容器所在的父容器采用了默认样式overflow: visible，即允许内容溢出到父容器外，那么就会对使用flex: 1的容器没有给到一个固定的高度，所以我们针对这种情况，只需要在父容器添加overflow: auto来让父容器创建BFC，让内容不会溢出。

实例代码

<!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>

    body {

      margin: 0;

    }

    .container {

      display: flex;

      flex-direction: column;

      height: 100vh;

      overflow: hidden;

    }

    .parent1 {

      height: 80px;

      background: red;

    }

    .parent2 {

      flex: 1;

      display: flex;

      flex-direction: column;

      /* 父容器创建BFC，一般使用overflow:auto */

      overflow: auto;

    }

    .child1 {

      height: 80px;

      background: green;

    }

    .child2 {

      flex: 1;

      overflow: auto;

      background: greenyellow;

    }

    .child2-sub {

      height: 1000px;

      width: 100px;

      background: orange;

    }

  </style>

  <body>

    <div class="container">

      <div class="parent1"></div>

      <div class="parent2">

        <div class="child1"></div>

        <div class="child2">

          <div class="child2-sub"></div>

        </div>

      </div>

    </div>

  </body>

</html>

overflow_auto在flex_1的容器失效的更多相关文章

  1. k8s集群Job Pod 容器可能因为多种原因失效，想要更加稳定的使用Job负载，有哪些需要注意的地方？

    k8s集群Job Pod 容器可能因为多种原因失效,想要更加稳定的使用Job负载,有哪些需要注意的地方? 面试官:"计数性Job默认完成模式是什么?Indexed模式如何发布自定义索引呢?& ...

  2. 容器技术研究-Kubernetes基本概念

    最近在研究容器技术,作为入门,基本概念必须搞明白,今天整理一下Kubernetes的基本概念. 一.什么是Kubernetes Kubernetes(k8s)是自动化容器操作的开源平台,这些操作包括部 ...

  3. Kubernetes容器集群管理环境 - 完整部署（上篇）

    Kubernetes(通常称为"K8S")是Google开源的容器集群管理系统.其设计目标是在主机集群之间提供一个能够自动化部署.可拓展.应用容器可运营的平台.Kubernetes ...

  4. Kubernetes+Docker+Istio 容器云实践

    随着社会的进步与技术的发展,人们对资源的高效利用有了更为迫切的需求.近年来,互联网.移动互联网的高速发展与成熟,大应用的微服务化也引起了企业的热情关注,而基于Kubernetes+Docker的容器云 ...

  5. Hadoop官方文档翻译——YARN Architecture（2.7.3）

    The fundamental idea of YARN is to split up the functionalities of resource management and job sched ...

  6. java中的重绘

    void java.awt.Container.validate()Validates this container and all of its subcomponents.这个函数更新容器及其全部 ...

  7. java集群技术(转)

    来源:http://blog.csdn.net/cdh1213/article/details/21443239 序言 越来越多的关键应用运行在J2EE(Java2, Enterprise Editi ...

  8. 2015第44周五Java集群技术（转）

    从http://blog.csdn.net/cdh1213/article/details/21443239上看到这篇文章,感觉很不错,找好久没找到中文出处,最早看是从http://www.these ...

  9. 深入了解java集群技术

    原文源自:http://blog.csdn.net/happyangelling/article/details/6413584 序言 越来越多的关键应用运行在J2EE(Java 2, Enterpr ...

  10. java集群

    java集群 分类: java学习2011-05-12 09:12 7531人阅读 评论(9) 收藏 举报 java服务器负载均衡ejb集群数据库 序言 越来越多的关键应用运行在J2EE(Java 2 ...

随机推荐

  1. 从源码分析 MGR 的流控机制

    Group Replication 是一种 Shared-Nothing 的架构,每个节点都会保留一份数据. 虽然支持多点写入,但实际上系统的吞吐量是由处理能力最弱的那个节点决定的. 如果各个节点的处 ...

  2. JSP脚本知识

    JSP脚本元素 1.在jsp中嵌入的服务端运行的小程序称为脚本.实质是java程序. 2.脚本元素可以分为三类:表达式.Scriptlet.声明. 表达式 计算java表达式的值,得到的结果转化为字符 ...

  3. 2022最新最详细必成功的在Vscode中设置背景图、同时解决不受支持的问题

    文章目录 1.效果展示 2.设置背景图的详细步骤 2.1 .下载background插件 2.2 .选择扩展设置 2.3 .在setting.json中编辑 2.4.对应的配置文件 2.5 .重启电脑 ...

  4. 栈溢出漏洞利用流程——以syncbrs为例

    0x1 缓冲区溢出漏洞攻击简介 缓冲区溢出攻击是针对程序设计缺陷,向程序输入缓冲区写入使之溢出的内容(通常是超过缓冲区能保存的最大数据量的数据),从而破坏程序的堆栈,使程序转而执行其他指令,以达到攻击 ...

  5. 永久解决Ubuntu下adb权限问题

    在Linux环境下使用adb链接手机,经常会遇到全下问题,如下: adb: unable to connect for root: insufficient permissions for devic ...

  6. Flask框架：如何运用Ajax轮询动态绘图

    摘要:Ajax是异步JavaScript和XML可用于前后端交互. 本文分享自华为云社区<Flask框架:运用Ajax轮询动态绘图>,作者:LyShark. Ajax是异步JavaScri ...

  7. MySQL InnooDB引擎之并发事务问题以及隔离级别的作用和区别

    最近在复习MySQL事务,但网上很多博客和资料可以说讲的不是模棱两可就是只有文字描述不够形象易懂,下面通过我的学习来详细讲一讲事务并发都会引起哪些问题?以及隔离级别是什么?InnoDB引擎是如何通过隔 ...

  8. mindxdl---common---db_handler.go

    // Copyright (c) 2021. Huawei Technologies Co., Ltd. All rights reserved.// Package common this file ...

  9. ThinkPHP 6.0 RC2 版本发布——架构升级、精简核心

    自从5.2版本变更为6.0以来,官方一直致力于优化架构和精简核心,同时也在准备手册和测试工作,在经过近1个月的开发迭代后,官方宣布发布ThinkPHP6.0RC2版本. 主要更新 相比较RC1版本更新 ...

  10. 17、输入一行以空格分隔的英文，判断其共有多少单词，不能包含冠词a

    /*输入一行以空格分隔的英文,判断其共有多少单词,不能包含冠词a */ #include <stdio.h> #include <stdlib.h> int isWord(ch ...