What causes a div element to not be 100% width when all its predecessors are already set to 100

Question

What causes a div element to not be 100% width when all its predecessors are already set to 100

Why are the divs not expanding with content even though everything is set to 100% and how can this issue be resolved?

html, body {
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
}

/* both of these are constrained to 100vh */
#root {
  height: 100%;
  background: #2196F3;
}

#wrapper {
  height: 100%;
  background: #2196F3;
}
#wrapper > div {
  padding: 10px;
}

<html>
  <body>
    <div id="root">
      <div id="wrapper">
        <div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
        
        <div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
        
        <div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
        
        <div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
        
        <div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
        
        <div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
        
        <div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
        
        <div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
      </div>
    </div>
  </body>
</html>

I have looked through many similar posts regarding this problem, but I couldn't find a solution that worked for me.

It may come up, so just to address it now: I am unable to use min-height due to reasons unrelated to this specific issue.

html css

Answer 1

Answer №1

To improve your layout, delete the height:100% property from your #wrapper

html, body {
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
}

/* this is only 100vh */
#root {
  height: 100%;
  background: #2196F3;
}

/* this is only 100vh */
#wrapper {
  
  background: #2196F3;
}
#wrapper > div {
  padding: 10px;
}

<html>
  <body>
    <div id="root">
      <div id="wrapper">
        <div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
        
        <div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
        
        <div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
        
        <div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specim...   </div>
        
        <div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, w ...

Answer 2

To improve your layout, delete the height:100% property from your #wrapper

html, body {
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
}

/* this is only 100vh */
#root {
  height: 100%;
  background: #2196F3;
}

/* this is only 100vh */
#wrapper {
  
  background: #2196F3;
}
#wrapper > div {
  padding: 10px;
}

<html>
  <body>
    <div id="root">
      <div id="wrapper">
        <div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
        
        <div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
        
        <div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
        
        <div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specim...   </div>
        
        <div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, w ...

Answer 3

Answer №2

Consider removing the height:100% property from your wrapper element.

html, body {
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
}

/* this is only 100vh */
#root {
  height: 100%;
  background: #2196F3;
}

/* this is only 100vh */
#wrapper {
  background: #2196F3;
}
#wrapper > div {
  padding: 10px;
}

<html>
  <body>
    <div id="root">
      <div id="wrapper">
        <div>Unique text here.</div>

...

</html>

Answer 4

Consider removing the height:100% property from your wrapper element.

html, body {
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
}

/* this is only 100vh */
#root {
  height: 100%;
  background: #2196F3;
}

/* this is only 100vh */
#wrapper {
  background: #2196F3;
}
#wrapper > div {
  padding: 10px;
}

<html>
  <body>
    <div id="root">
      <div id="wrapper">
        <div>Unique text here.</div>

...

</html>

Answer 5

Answer №3

To create a consistent background color for every wrapper div, simply add background-color: #2196F3; to the CSS styling of #wrapper>div.

It's worth noting that you do not need to include height: 100% in the styling for both wrapper and root to achieve your desired outcome.

html,
body {
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
}

#wrapper>div {
  padding: 10px;
  background: #2196F3;
}

<html>

<body>
  <div id="root">
    <div id="wrapper">
      <div>Lorem Ipsum is simply dummy text...
        (omitted for brevity)
      </div>
    </div>
  </div>
</body>

</html>

Answer 6

To create a consistent background color for every wrapper div, simply add background-color: #2196F3; to the CSS styling of #wrapper>div.

It's worth noting that you do not need to include height: 100% in the styling for both wrapper and root to achieve your desired outcome.

html,
body {
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
}

#wrapper>div {
  padding: 10px;
  background: #2196F3;
}

<html>

<body>
  <div id="root">
    <div id="wrapper">
      <div>Lorem Ipsum is simply dummy text...
        (omitted for brevity)
      </div>
    </div>
  </div>
</body>

</html>

Answer 7

Answer №4

Straightforward fix

Incorporate the CSS rule overflow:auto to the element with ID #wrapper

This will enable the parent element to manage the overflow of its child content when it exceeds the original 100% height limit

Answer 8

Straightforward fix

Incorporate the CSS rule overflow:auto to the element with ID #wrapper

This will enable the parent element to manage the overflow of its child content when it exceeds the original 100% height limit

What causes a div element to not be 100% width when all its predecessors are already set to 100

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Obtaining text from HTML code

Adjust the appearance attribute of FormField within the designated theme

What is the process for sending a request and obtaining a response from a REST API using JavaScript?

Ways to incorporate or eliminate a class on a hyperlink

Website navigation toolbar with access level control

Troubleshooting HTML Output Display Issues

Reasoning behind using double colons in CSS

Utilizing GTM to Implement Dynamic Content Deployment

Not implementing auto-scroll feature because of the presence of `position: sticky` or `position: fixed` CSS properties

Centering content within a Bootstrap 4 card deck: tips and tricks

Scrollable carousel images with responsive design in bootstrap on mobile devices

Creating an adaptable image with CSS or Material UI

Issue with the alignment of two rows in an HTML template

AngularJS allows us to easily include the route provider templateUrl path in the view div, making

Send the user back to the homepage without the need to refresh the page

Showing information from a database query

Tips for displaying reCaptcha responses above or below the contact form

Creating an HTML drop-down menu for selecting a vehicle

Tips for eliminating excessive line breaks when incorporating a table tag into nl2br

In JavaScript, attempting to trigger a click event on an element with a <ul> and <li id> and <a href>, but only after the <li id> has been selected