css Question posted in
Some basic documentation can be found here.

Css – Why does an HTML div with no class change formatting?

Here’s a simple bit of HTML:

<html>
    <head>
        <style>
            .container {
                display: flex;
                flex-direction: column;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <button>Button 1</button>
            <button>Button 2</button>
        </div>
    </body>
</html>

This makes a column of two buttons occupying the width of the window:
Two equal buttons

If I surround the first button in a div with no class like this:

<html>
    <head>
        <style>
            .container {
                display: flex;
                flex-direction: column;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div><button>Button 1</button></div>
            <button>Button 2</button>
        </div>
    </body>
</html>

then I would expect there to be no change to the output, but that’s wrong. I get:
enter image description here

Why is this?

Tags:

2

Answers


  1. 0

    This is because the by default width of contents like div’s in HTML is fit-content
    So this div is also adjusting it’s width according to the content inside it
    As you can see this in following example

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="container">
      <div>
        <button>Small Button</button>
      </div>
      <div>
        <button>This is Large Button</button>
      </div>
    </div>
  </body>
</html>
    Login or Signup to reply.
  2. 0

    the button is no more directly affected by the display property of the parent container(div with the class name of container)… the button is now nested inside a div(with no class). if you want the button to take full width, give it a width property of 100%. this way it now takes the full width of the new parent container which is the div that has no class.

    the ‘display: flex;’ style affects the direct children of the parent container

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search