Why Doesn't My Outer `` Contain My Inner `` When Resized?-CSS Tutorial-php.cn

Why Doesn't My Outer `` Contain My Inner `` When Resized?

Why Does the Outer

Here Not Completely Surround the Inner

Problem:

In the provided code snippet, the content of the inner

doesn't prevent the outer

from shrinking when the window is resized. As a result, the inner

spills over the outer

Discussion:

The issue arises because the outer

is set to have a fixed width. By default,块元素（block elements）has its width based on its parent element. However, the inner

contains content that exceeds the width of the outer

, causing it to overflow.

Solution:

To make the outer

wrap around the inner

, one can utilize a combination of inline-block and min-width:100%. By setting the outer

to inline-block, its width becomes content-based rather than parent-based. Adding min-width:100% ensures that the outer

is never smaller than the width of its content.

Updated Code:

.demo {
  ...
  display:inline-block;
  min-width:100%;
}

Copy after login

This modification allows the outer

to automatically resize based on its content, preventing the inner

from spilling outside.

The above is the detailed content of Why Doesn't My Outer `` Contain My Inner `` When Resized?. For more information, please follow other related articles on the PHP Chinese website!

Previous article：How Can I Get DOM Elements by Class Name in PHP? Next article：Can CSS3 Gradients Incorporate Transparency?

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Latest Issues