父元素设置了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. 攻防世界web进阶题—unfinish

    攻防世界web进阶题-unfinish 1.看一下题目提示SQL 2.打开题目看一下源码,没有问题 3.查一下网站的组成:php+Apache/2.4.7+Ubuntu 4.扫一下目录,扫到一个注册页 ...

  2. 论文解读（SimGRACE）《SimGRACE: A Simple Framework for Graph Contrastive Learning without Data Augmentation》

    论文信息 论文标题:SimGRACE: A Simple Framework for Graph Contrastive Learning without Data Augmentation论文作者: ...

  3. 学习Java的第十五天——数学运算

    学习内容:数学运算 1.三角函数运算 代码实现: public class 三角函数运算 { public static void main(String[] args) { // TODO 自动生成 ...

  4. Spring Boot整合Swagger报错："this.condition" is null

    前段时间看到群里有吐槽swagger整合问题,当时没仔细看,总以为是姿势不对. 这两天正好自己升级Spring Boot版本,然后突然出现了这样的一个错误: Caused by: java.lang. ...

  5. 【Github】 Github访问不是私密连接问题

    前言 GitHub是一个软件项目的托管平台,是我们经常需要访问的,我原本在学校时候虽然网速比较慢,但是还以能够满足一些代码下载和上传的,在暑假回到家,再去访问的时候就出现了不能访问的问题. 问题描述 ...

  6. Java系列之运算符

    运算符 算术运算符:+ (加).-(减) .*(乘)./(除).%(模).++(自增) . --(自减) 赋值运算符:= 关系运算符:>.<.>= <= == != insta ...

  7. SQL Server默认数据库存放位置

    更新记录 2022年6月13日 发布. Windows操作系统 C:\Program Files\Microsoft SQL Server\MSSQLxx_xx.MSSQLSERVER\MSSQL\D ...

  8. composition api和react hooks的对比

    一.  我的走位:   保持中立 1. 各有各的好处,  谁也别说谁 2. 一个东西带来的好处, 相应的副作用肯定也有, 人无完人 二 .  vue3 的composition api 和   rea ...

  9. flink处理延迟

    flink处理延迟 flink主要是处理实时数据的,在处理实时数据的过程中,难免会遇到乱序的存在.以事件时间举例,先发生的事件后到处理算子.flink针对乱序数据的处理主要有三种方式: 拨慢水位线的生 ...

  10. re学习笔记

    re学习笔记 学习链接: https://regexlearn.com/zh-cn/learn \w: 数字字母下划线 \W: 非\w \d \D: !\d \s: space cha \S: !\s ...