父元素设置了min-width:fit-content后，其宽度由子元素的宽度来决定

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

        html, body {

            padding: 0;

            margin: 0;

            height: 100%;

            background: lightgray;

        }

        .container {

            width: 400px;

            height: 200px;

            min-width: fit-content;

        }

        .header {

            height: 50px;

            background: red;

        }

        .body {

            width: 500px;

            height: 150px;

            background: lightblue;

        }

    </style>

</head>

<body>

    <div class="container">

        <div class="header"></div>

        <div class="body">

        </div>

    </div>

</body>

</html>

看到父元素的宽度被body元素顶开了。

如果不想子元素顶开父元素宽度，而是将子元素的最大宽度设定为父元素的原始宽度，应该使用flex包裹子元素。

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

        html, body {

            padding: 0;

            margin: 0;

            height: 100%;

            background: lightgray;

        }

        .container {

            width: 400px;

            height: 200px;

            min-width: fit-content;

        }

        .header {

            height: 50px;

            background: red;

        }

        .body {

            width: 500px;

            height: 150px;

            background: lightblue;

        }

    </style>

</head>

<body>

    <div class="container">

        <div class="header"></div>

        <div style="display: flex;height: 100%;">

            <div style="flex-grow: 1; width: 0">

                <div class="body">

                </div>

            </div>

        </div>

    </div>

</body>

</html>

使用flex防止fit-content子元素冲出父元素宽度的方法的更多相关文章

  1. 子div用了float浮动之后，如何撑开父元素，让父元素div自动适应高度的问题

    方法一: html: <div id="all1"> <div id="left1">1</div> <div id= ...

  2. JS子元素oumouseover触发父元素onmouseout

    原文:JS子元素oumouseover触发父元素onmouseout JavaScript中,父元素包含子元素: 当父级设置onmouseover及onmouseout时,鼠标从父级移入子级,则触发父 ...

  3. 子元素z-index高于父元素兄弟元素z-index被遮挡问题

    问题:最近在写样式时,遇到一个这样的问题,子元素的z-index值大于父元素兄弟元素z-index值,结果子元素超出父元素部分被父元素兄弟元素遮挡解决:将父元素的z-index值设置为大于兄弟元素z- ...

  4. 二、vue学习--父元素如何获取子元素的值，子元素如何获取父元素的值

      下图是父元素: 下图是子元素,获取父元素的值,使用props定义属性,这样就可以获取到父元素上传过来的set .place.type,拿到值就可以做一些自己的逻辑处理 二.子元素给父元素传值? 下 ...

  5. js进阶 11-8 jquery如何获取元素相对于父元素的位置

    js进阶 11-8  jquery如何获取元素相对于父元素的位置 一.总结 一句话总结:用jquery的position方法,但是使用这个方法的前提是父元素相对定位,子元素绝对定位,否则和offset ...

  6. ie6下子元素撑大父元素

    今天遇到了一个问题.在给a元素定义hover并且增大尺寸时,IE6下该元素会把父元素撑大,而非IE浏览器则是表现为溢出效果不会撑大父元素(我想要的效果).解决IE6的这个问题是采用了一个定位+负边距的 ...

  7. parent([expr]) 取得一个包含着所有匹配元素的唯一父元素的元素集合。

    parent([expr]) 概述 取得一个包含着所有匹配元素的唯一父元素的元素集合.大理石构件 你可以使用可选的表达式来筛选. 参数 exprStringV1.0 用来筛选的表达式 示例 描述: 查 ...

  8. 关于子元素的margin-top溢出和元素浮动对父元素高度影响解决方案

    以下是个人学习笔记,仅供学习参考. 1.关于子元素的margin-top作用在无margin-top-border的父元素上导致子元素的margin-top溢出问题. 在给没有margin-top-b ...

  9. 【css】子元素浮动到了父元素外，父元素没有随子元素自适应高度，如何解决？

    正常情况 如果子元素没有设置浮动(float),父元素的高度会随着子元素高度的改变而改变的. 设置浮动以后 父元素的高度不会随着子元素的高度而变化. 例如:在一个ul中定义若干个li,并设置float ...

随机推荐

  1. 【爬虫+情感判定+Top10高频词+词云图】“谷爱凌”热门弹幕python舆情分析

    一.背景介绍 最近几天,谷爱凌在冬奥会赛场上夺得一枚宝贵的金牌,为中国队贡献了自己的荣誉! 针对此热门事件,我用Python的爬虫和情感分析技术,针对小破站的弹幕数据,分析了众网友弹幕的舆论导向,下面 ...

  2. UDP协议、操作系统、同步与异步、阻塞与非阻塞

    UDP协议 # 客户端 import socket server = socket.socket(type=socket.SOCK_DGRAM) server.bind(('127.0.0.1', 8 ...

  3. Nginx的mirror指令能干啥？

    mirror 流量复制 Nginx的 mirror 指令来自于 ngx_http_mirror_module 模块 Nginx Version > 1.13.4 mirror 指令提供的核心功能 ...

  4. 百万数据 mysql count（*）优化

    一.故事背景有一张 500w 左右的表做 select count(*) 速度特别慢. 二.原 SQL 分析Server version: 5.7.24-log MySQL Community Ser ...

  5. 升级 package.json 内所有包的版本号

    安装 全局安装这个库 npm-check-updates,因为后续依靠它来实现更新 package.json 中包的版本号 yarn global add npm-check-updates 食用 看 ...

  6. [codeforces] 暑期训练之打卡题（三）

    每个标题都做了题目原网址的超链接 Day21<Alphabetic Removals> 题意: 给定一个字符串,要求按照字典序按照出现的前后顺序删除 k 个字母 题解: 记录字符串中各个字 ...

  7. jeecgboot-vue3笔记（九）——treeSelect树形选择组件的使用（异步加载）

    使用效果 初始化加载顶层节点,点击各层的>加载该节点的子节点,加载后>标识去除不再重复加载. 前端代码 vue ant-design组件 tree-data,树节点,children方式或 ...

  8. 【原创】史上最简单易懂的kali修改主机名方法

    前言 主机名:在一个局域网中,每台机器都有IP地址,但是IP地址不便于人们记忆.于是采用主机名,即利于主机之间的区分,又方便人们的记忆主机.--和域名差不多. 一,查看当前的主机名 ┌──(root㉿ ...

  9. 小样本利器1.半监督一致性正则 Temporal Ensemble & Mean Teacher代码实现

    这个系列我们用现实中经常碰到的小样本问题来串联半监督,文本对抗,文本增强等模型优化方案.小样本的核心在于如何在有限的标注样本上,最大化模型的泛化能力,让模型对unseen的样本拥有很好的预测效果.之前 ...

  10. Vmware虚拟机安装及相关配置流程

    1.Vmware虚拟软件安装 1.1下载地址 vmware 12 pro 的版本稳定性较好,所有我们最好选择该版本 下载地址:https://www.onlinedown.net/soft/10053 ...