When the parent element is set to a fixed size, the child element does not respond to the overflow auto property

Question

When the parent element is set to a fixed size, the child element does not respond to the overflow auto property

I am trying to create a parent div with fixed size that contains two children, but I want only the second child to have overflow set to auto.

However, it's not working as expected...

Here is the code snippet I used:

.parent
{
height: 200px;
width: 100px;
background-color: #F00;
padding: 10px;
}

.second-child
{
overflow: auto;
}

<div class="parent">
<div class="first-child">
Some content
</div>
<hr />
<div class="second-child">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</div>
</div>

Any suggestions on how to make it work?

html css overflow

Answer 1

Answer №1

To limit the height of a container in CSS, you can utilize the max-height property. By using max-height, you can define the maximum height allowed for the container. If the content exceeds this set maximum height, a vertical scroll bar will automatically appear.

Code

.parent
{
height: 200px;
width: 100px;
background-color: #F00;
padding: 10px;
}

.second-child
{
overflow: auto;
        max-height:100px
}

<div class="parent">
<div class="first-child">
Some content
</div>
<hr />
<div class="second-child">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</div>
</div>

Answer 2

To limit the height of a container in CSS, you can utilize the max-height property. By using max-height, you can define the maximum height allowed for the container. If the content exceeds this set maximum height, a vertical scroll bar will automatically appear.

Code

.parent
{
height: 200px;
width: 100px;
background-color: #F00;
padding: 10px;
}

.second-child
{
overflow: auto;
        max-height:100px
}

<div class="parent">
<div class="first-child">
Some content
</div>
<hr />
<div class="second-child">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</div>
</div>

Answer 3

Answer №2

It is important to establish a maximum value before the overflow occurs...

UPDATE: Make sure to set the max-height to a percentage so that it can adjust according to your changing requirements. I have set it to 80% in this case as it fits nicely within the second-child element

.second-child
{
    max-height: 80%;
    overflow: auto;
}

With these adjustments, everything should be working smoothly!

.parent
{
    height: 200px;
    width: 100px;
    background-color: #F00;
    padding: 10px;
}

.second-child
{
    max-height: 80%;
    overflow: auto;
}

<div class="parent">
<div class="first-child">
Some content
</div>
<hr />
<div class="second-child">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</div>
</div>

Answer 4

It is important to establish a maximum value before the overflow occurs...

UPDATE: Make sure to set the max-height to a percentage so that it can adjust according to your changing requirements. I have set it to 80% in this case as it fits nicely within the second-child element

.second-child
{
    max-height: 80%;
    overflow: auto;
}

With these adjustments, everything should be working smoothly!

.parent
{
    height: 200px;
    width: 100px;
    background-color: #F00;
    padding: 10px;
}

.second-child
{
    max-height: 80%;
    overflow: auto;
}

<div class="parent">
<div class="first-child">
Some content
</div>
<hr />
<div class="second-child">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</div>
</div>

Answer 5

Answer №3

~~Updated:~~

~~Set a max-height to specify when the overflow will occur~~

Update 2:

Convert the container into a table
Change the other 2 divs to table-rows
In the 2nd div, position the text relative to an absolute position

.parent {
  height: 200px;
  width: 100px;
  background-color: #F00;
  padding: 10px;
  display: table;
}

.first-child,
.second-child {
  display: table-row;
}

.second-child {
  height: 100%;
}

.second-child-content-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}

.second-child-content {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: auto;
}

<div class="parent">
  <div class="first-child">
    Some content
  </div>
  <hr />
  <div class="second-child">
    <div class="second-child-content-wrapper">
      <div class="second-child-content">
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
        in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
      </div>
    </div>
  </div>
</div>

Answer 6

~~Updated:~~

~~Set a max-height to specify when the overflow will occur~~

Update 2:

Convert the container into a table
Change the other 2 divs to table-rows
In the 2nd div, position the text relative to an absolute position

.parent {
  height: 200px;
  width: 100px;
  background-color: #F00;
  padding: 10px;
  display: table;
}

.first-child,
.second-child {
  display: table-row;
}

.second-child {
  height: 100%;
}

.second-child-content-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}

.second-child-content {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: auto;
}

<div class="parent">
  <div class="first-child">
    Some content
  </div>
  <hr />
  <div class="second-child">
    <div class="second-child-content-wrapper">
      <div class="second-child-content">
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
        in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
      </div>
    </div>
  </div>
</div>

When the parent element is set to a fixed size, the child element does not respond to the overflow auto property

Answer №1

Answer №2

Answer №3

Update 2:

Similar questions

AngularJS - How to loop through a div to display all items

Infinite scrolling feature on Kendo UI mobile listview showcasing a single item at a time

Leverage the power of Angular by configuring a custom webpack setup to

Creating a dynamic webpage with flexible design and interconnected containers using the Bootstrap framework

Tips on attaching a class to elements in a loop when a click event occurs

Why won't JQuery .ajax send my request?

What is the limit of CSS includes that IE can process?

The sub-menu is being obscured by a PDF element in Internet Explorer, causing visibility issues

When the div is refreshed, the input box should retain the text instead of clearing it

Why is it not possible for me to change the font color to white?

Adding custom styles to an unidentified child element in React using Material-UI

Inquiring about the rationale behind using `jquery.ui.all.css` specifically

In JavaScript, I'm facing an issue where I can't seem to use ' ' for line breaks for some reason. It's not functioning as expected, and I'm

Update PHP version by utilizing a form with varying field lengths

Elements floating and creating gaps (caused by varying heights)

Customizing CSS for AGM Info Windows

Tips for choosing a particular value in an HTML <script> query

preserving dynamic CSS class allocation upon page refresh

Overlap of Bootstrap Columns Occurs When Resizing the Browser

I require the integration of HTML elements within a Java class