Pure CSS allows child elements to break through the width limit of parent elements

Pure CSS allows child elements to break through the width limit of parent elements

In writing styles, we can often see this situation

The code is as follows

<div style="width: 300px;border: 4px solid #000;margin: 20px;padding: 2px;">
    Parent element <div style="border: 1px solid blue;height: 100px;white-space: nowrap;">
     <span>child elementschild elementschild elementschild elementschild elementschild elementschild elementschild elementschild elementschild elementschild elementschild elementschild elementschild elementschild elementschild elementschild elementschild elementschild elementschild elements</span>
   </div>
 </div>

If you think about this phenomenon carefully, why? You might ask, shouldn’t the child element expand the width of the parent element? Just like expanding the height of the parent element. Why? So how can we make the parent element of this child element expand to this width? There are two solutions here.

1. display: inline-block

The layout style is as follows

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<style>
  #box1 {
    width: 500px;
    height: 200px;
    border: 2px solid blue;
    padding: 10px;
  }

  #box2 {
    white-space: nowrap;
    display: inline-block;
  }

  #box3 {
    width: 300px;
    height: 200px;
    background-color: blueviolet;
    display: inline-block;
    vertical-align: middle;
  }

  #box4 {
    width: 400px;
    height: 200px;
    background-color: black;
    display: inline-block;
    vertical-align: middle;
  }
</style>

<body>
  <div id="box1">
    <div id="box2">
      <div id="box3"></div>
      <div id="box4"></div>
    </div>
  </div>
</body>

</html>

The result is as shown in the figure. Box3 and box4 expand the width of box2.

2. display: inline-flex

The layout style is as follows

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<style>
  #box1 {
    width: 500px;
    height: 200px;
    border: 2px solid blue;
    padding: 10px;
  }

  #box2 {
    white-space: nowrap;
    display: inline-flex;
  }

  #box3 {
    width: 300px;
    height: 200px;
    background-color: blueviolet;
    vertical-align: middle;
  }

  #box4 {
    width: 400px;
    height: 200px;
    background-color: black;
    vertical-align: middle;
  }
</style>

<body>
  <div id="box1">
    <div id="box2">
      <div id="box3"></div>
      <div id="box4"></div>
    </div>
  </div>
</body>

</html>

The effect is as follows

This is the end of this article about how to use pure CSS to make child elements exceed the width limit of parent elements. For more relevant CSS child elements exceeding the width of parent elements, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!

<<:  Two ways to prohibit clearing the input text input cache in html

>>:  MySQL changes the default engine and character set details

Recommend

Detailed explanation of the use of shared memory in nginx

In the nginx process model, tasks such as traffic...

Summary of several postures that must be mastered in Linux compilation optimization

01. Compile options and kernel compilation The Li...

How to install Graphviz and get started tutorial under Windows

Download and installConfigure environment variabl...

Detailed explanation of the concept of docker container layers

Table of contents 01 Container consistency 02 Con...

MySQL table return causes index invalidation case explanation

Introduction When the MySQL InnoDB engine queries...

Implementation of CSS heart-shaped loading animation source code

Without further ado, let me show you the code. Th...

Detailed explanation of the execution differences between count(1), count(*) and count(column name)

Implementation effect: 1. count(1) and count(*) W...

CSS simulates float to achieve the effect of center text surrounding the image on the left and right

What is text wrapping around images? This is the ...

Solution to the failure of entering the container due to full docker space

Since the problem occurred rather suddenly and th...

How to monitor mysql using zabbix

Zabbix deployment documentation After zabbix is ​...

A brief analysis of the usage of USING and HAVING in MySQL

This article uses examples to illustrate the usag...

Solution to the paging error problem of MySQL one-to-many association query

The query data in the xml price inquiry contains ...

CentOS 6 uses Docker to deploy Zookeeper operation example

This article describes how to use docker to deplo...

Implementation of waterfall layout + dynamic rendering

Table of contents Typical waterfall website Water...

Introducing ECharts into the Vue project

Table of contents 1. Installation 2. Introduction...