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

Teach you how to quickly enable self-monitoring of Apache SkyWalking

1. Enable Prometheus telemetry data By default, t...

Analysis of the implementation principle of Vue instructions

Table of contents 1. Basic Use 2. Working Princip...

Introduction to who command examples in Linux

About who Displays users logged into the system. ...

How to use the debouce anti-shake function in Vue

Table of contents 1. Anti-shake function 2. Use d...

A brief discussion on several ways to pass parameters in react routing

The first parameter passing method is dynamic rou...

Detailed explanation of the use of cloud native technology kubernetes scheduling unit pod

The smallest scheduling unit in k8s --- pod In th...

Perfect solution to the problem of MySQL shutting down immediately after startup (caused by ibdata1 file corruption)

The mysql on a server in the computer room had be...

Detailed explanation of the basic implementation principle of MySQL DISTINCT

Preface DISTINCT is actually very similar to the ...

MYSQL5.6.33 database master/slave (Master/Slave) synchronization installation and configuration details (Master-Linux Slave-windows7)

1. Installation environment Here is also a record...

Details of MutationObServer monitoring DOM elements in JavaScript

1. Basic Use It can be instantiated through the M...

How to simulate enumeration with JS

Preface In current JavaScript, there is no concep...

Analysis of the locking mechanism of MySQL database

In the case of concurrent access, non-repeatable ...

Analysis of the usage of loop statements (WHILE, REPEAT and LOOP) in MySQL stored procedures

This article uses examples to illustrate the usag...

Example analysis of the principle and solution of MySQL sliding order problem

This article uses examples to explain the princip...

The space is displayed differently in IE, Firefox, and Chrome browsers

&nbsp;&nbsp;The display effects on IE, Fir...