CODEWITHSUNDEEP
htmlcssoverflow
StyleSh1t
StyleSh1t

Reputation: 747

overflow auto doesn't work in child element when parent has fixed size

I created a parent div with fixed size which contains 2 children, but I want that only the second one will have overflow: auto;

Unfortunately, it doesn't work as expected...

Here is my snippet:

.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 ideas?

Upvotes: 0

Views: 1910

Answers (3)

Mrigank Pawagi
Mrigank Pawagi

Reputation: 922

Updated:

Define a max-height to tell the browser after what length the overflow would take place

Update 2:

  1. Make the container a table
  2. Make the other 2 div's table-rows
  3. In 2nd div, put the text in a position relative following position absolute

.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>

Upvotes: 0

Nikhil Eshvar
Nikhil Eshvar

Reputation: 495

You should set a max-value before the overflow kicks in...

EDIT: Set max-height to % so that it will always be within you changing needs. I kept it as 80% here since it fits in within the second-child nicely

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

Now it should be good!

.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>

Upvotes: 0

Abhishek Ekaanth
Abhishek Ekaanth

Reputation: 2567

You can use max-height CSS a property. With the help of max-height, You can set the maximum height. If the content is exceeding the maximum height, Y scroll will be automatically implemented.

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>

Upvotes: 2

Related Questions