"Setting a maximum height for a div element, along with nested divs and paragraphs

Question

"Setting a maximum height for a div element, along with nested divs and paragraphs

.wrap
                {
                  
                  width:400px;
                  height:200px;
                  border:1px solid #000;
                  }
                
                .content
                {
                  width:300px;
                  max-height:200px;
                  background-color:blue;
                  margin-left:50px;
                  }
                .content p
                {
                  margin:0;
                  }
                .header
                {
                  margin-left:20px;
                  font-weight:bold;
                    height:20px;
                   }
                .header p
                {
                  margin:0;
                  
                  }

<div class="wrap">
              <div class="header">
                <p>What is Lorem Ipsum?</p>
              </div>
              <div class="content">
               
                <p>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.</p>
                
                
              </div>
              
              
             </div>

Hello, I have a CSS-related question. I would like the paragraph to always be contained within the blue div, and the blue div should not exceed the dimensions of the "wrap" div. When I add more text to the header, the height of the blue div should decrease accordingly.

javascript html css

Answer 1

Answer №1

set max-height:180px; and include overflow: hidden for .content

.wrap
{
  
  width:400px;
  height:200px;
  border:1px solid #000;
  }

.content
{
  width:300px;
  max-height:180px;
  background-color:blue;
  margin-left:50px;
  overflow: hidden;
  }
.content p
{
  margin:0;
  }
.header
{
  margin: 0 0 0 20px;
  font-weight:bold;
    height:20px;
   }
.header p
{
  margin:0;
  
  }

<div class="wrap">
  <div class="header">
    <p>What exactly is Lorem Ipsum?</p>
  </div>
  <div class="content">
   
    <p>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.</p>
    
    
  </div>
  
  
 </div>

Answer 2

set max-height:180px; and include overflow: hidden for .content

.wrap
{
  
  width:400px;
  height:200px;
  border:1px solid #000;
  }

.content
{
  width:300px;
  max-height:180px;
  background-color:blue;
  margin-left:50px;
  overflow: hidden;
  }
.content p
{
  margin:0;
  }
.header
{
  margin: 0 0 0 20px;
  font-weight:bold;
    height:20px;
   }
.header p
{
  margin:0;
  
  }

<div class="wrap">
  <div class="header">
    <p>What exactly is Lorem Ipsum?</p>
  </div>
  <div class="content">
   
    <p>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.</p>
    
    
  </div>
  
  
 </div>

Answer 3

Answer №2

How about something similar to this?

HTML

.main-content
{
  width:400px;
  max-height:200px;
  background-color:green;
  margin-left:25px;
  overflow:hidden;
  overflow-y:auto;
  }

Answer 4

How about something similar to this?

HTML

.main-content
{
  width:400px;
  max-height:200px;
  background-color:green;
  margin-left:25px;
  overflow:hidden;
  overflow-y:auto;
  }

Answer 5

Answer №3

.wrap {
    width:400px;
    height:200px;
    border:1px solid #000;
    overflow-y: auto;
}

.content {
    width:300px;
    min-height:200px;
    background-color:blue;
    margin-left:50px;
}

To automatically adjust the height of .content if the content exceeds the minimum height of 200px, change max-height to min-height in the respective CSS rule.

Including the overflow-y: auto property in the .wrap class will add a scroll bar to the wrapper only if the content exceeds the defined height of

200px</code, or you can explicitly set <code>scroll

to always display the scrollbar.

.wrap {
    width: 400px;
    height: 200px;
    border: 1px solid #000;
    overflow-y: auto;
}

.content {
    width: 300px;
    min-height: 200px;
    background-color: blue;
    margin-left: 50px;
}

.content p {
    margin: 0;
}

.header {
    margin-left: 20px;
    font-weight: bold;
    height: 20px;
}

.header p {
    margin: 0;
}

<div class="wrap">
   <div class="header">
      <p>What is Lorem Ipsum?</p>
   </div>
   <div class="content">
      <p>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.</p>
   </div>
</div>

If you prefer to make only the .content scrollable, you can apply the overflow-y: auto to this class specifically instead of the .wrap class.

.wrap {
    width:400px;
    height:200px;
    border:1px solid #000;
    overflow: hidden;
}

.content {
    width:300px;
    max-height:200px;
    background-color:blue;
    margin-left:50px;
    overflow-y: auto;
}

By setting a maximum height for .content and applying the scroll property, the content will become scrollable if it exceeds the defined height, keeping the .wrap container non-scrollable with the overflow: hidden property.

Answer 6

.wrap {
    width:400px;
    height:200px;
    border:1px solid #000;
    overflow-y: auto;
}

.content {
    width:300px;
    min-height:200px;
    background-color:blue;
    margin-left:50px;
}

To automatically adjust the height of .content if the content exceeds the minimum height of 200px, change max-height to min-height in the respective CSS rule.

Including the overflow-y: auto property in the .wrap class will add a scroll bar to the wrapper only if the content exceeds the defined height of

200px</code, or you can explicitly set <code>scroll

to always display the scrollbar.

.wrap {
    width: 400px;
    height: 200px;
    border: 1px solid #000;
    overflow-y: auto;
}

.content {
    width: 300px;
    min-height: 200px;
    background-color: blue;
    margin-left: 50px;
}

.content p {
    margin: 0;
}

.header {
    margin-left: 20px;
    font-weight: bold;
    height: 20px;
}

.header p {
    margin: 0;
}

<div class="wrap">
   <div class="header">
      <p>What is Lorem Ipsum?</p>
   </div>
   <div class="content">
      <p>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.</p>
   </div>
</div>

If you prefer to make only the .content scrollable, you can apply the overflow-y: auto to this class specifically instead of the .wrap class.

.wrap {
    width:400px;
    height:200px;
    border:1px solid #000;
    overflow: hidden;
}

.content {
    width:300px;
    max-height:200px;
    background-color:blue;
    margin-left:50px;
    overflow-y: auto;
}

By setting a maximum height for .content and applying the scroll property, the content will become scrollable if it exceeds the defined height, keeping the .wrap container non-scrollable with the overflow: hidden property.

"Setting a maximum height for a div element, along with nested divs and paragraphs

Answer №1

Answer №2

Answer №3

Similar questions

Utilizing next/image as a backgroundImage in a div container

Having trouble with ion-item click not functioning in Ionic 3?

Refresh the Dom following an Ajax request (issue with .on input not functioning)

Create an Ajax request function to execute a PHP function, for those just starting out

Utilizing Object Arrays in Chart.js for Optimal Performance

Having an issue with transmitting information to the database using ajax and Laravel

Is there a simple method to add animation to a group of images displayed on click using JQuery?

Defeat a JavaScript function or turn it into a Singleton Function

Ensure that two div elements expand to occupy the available vertical space

Can someone explain the reason behind the sizing discrepancies of HTML and body elements when emulating a mobile device in Chrome Developer Tools?

JavaScript Numbers Having Strange Behavior

Exploring an Array Based on User's Input with JavaScript

Tips for aligning three <p> elements side by side using flexbox

What is the best way to alter the text of a button when the mouse hovers over it?

The Register Page is failing to load

Vue Quasar Drawer Layout with Bottom Bar

What is the process for tallying checked checkboxes in a functional component using React Native?

Creating dynamic values in data-tables using Vuetify

Why does the browser indicate that a GET request has been sent but the promise does not return anything?

Guide to placing an element behind text using Bootstrap 3