height issue with containers div

Hi Experts,

I have a parent div with class container with min-height 100% and having a border.    I have child div's But on mobile view parent container border is not growing with the size of child elements.  Child div's comes out of parent div.    Please see the screen and code below for more information.  You can see the third card is outside the main container.  Please help me in resolving this issue

  <body> 
    <div class="container">
    <div class="jumbotron">
        <img  src="images\banner.png"/>
    </div>
	<div class="row" style="Text-Align:center">
	
	<div class="card border-dark" style="width: 15rem;">
	   <p><h5><strong>Resources available to access at Northern Territory Library Only</strong></h5></p>
	   <ul>
	         <li><a href="https://ntln.idm.oclc.org/login?=url=https://ancestrylibrary.proquest.com"><strong>Ancestry Library Edition</strong></a></li>
			 <li><a href="https://ntln.idm.oclc.org/login?url=https://www.findmypast.com.au"><strong>find my past Australiasia</strong></a></li>
			 <li><a href="https://ntln.idm.oclc.org/login?url=https://www.saiglobal.com/online/autologin.asp?br=true&userid=6500121359"><strong>SAI Global onsite</strong></a></li>
			 <li><a href="https://ntln.idm.oclc.org/login?url=https://www.pressreader.com"><strong>Press reader</strong></a></li>
	   </ul>	   
	</div>
	<div class="card border-dark" style="width: 15rem;">
	   <p><h5><strong>Login to these resources anywhere using your public library membership</strong></h5></p>
	   <ul>
	         <li><a href="https://ntln.idm.oclc.org/login?url=http://search.ebscohost.com/login.aspx?authtype=ip,uid&profile=ehost&defaultdb=f5h&custid=ntlis"><strong>Ebsco host</strong></a></li>
			 <li><a href="https://ntln.idm.oclc.org/login?url=https://search.informit.com.au"><strong>Inform It</strong></a></li>
			 <li><a href="https://ntln.idm.oclc.org/login?url=https://www.saiglobal.com/online/autologin.asp?br=true&userid=7578676713"><strong>SAI Global offsite</strong></a></li>
	   </ul>	   
	</div>
	<div class="card border-dark" style="width: 15rem;">
	   <p><h5><strong>Log into these books emagazines & newspapers</strong></h5></p>
	   <ul>
	         <li><a href="https://ntln.idm.oclc.org/sso/bol"><strong>Bolinda</strong></a></li>
			 <li><a href="https://www.rbdigital.com/northernterritory/zinio"><strong>RB Digital Magazines</strong></a></li>
			 <li><a href="https://ntln.idm.oclc.org/login?url=http://www.pressreader.com"><strong>Press reader</strong></a></li>
			 <li><a href="https://ntln.idm.oclc.org/login?url=http://infotrac.galegroup.com/itweb/ntlis?db=TTDA"><strong>The Times Digital Articles</strong></a></li>
	   </ul>	   
	</div>	
	
	
    <div class="row" id="search-footer">
        <div id="searchlogo">
              <img src="images/searchlogo.png"/> 
        </div>
		<div id="group">
			<label>Search the Northern Territory Library catalogue</label>
			<div class="row" id="search-group">
              <input type="text" name="search" id="search">
			  <button class="btn btn-primary">Search</button>
			</div> 
		</div>		
	</div>
	</div>
    </div>	

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>

Open in new window


css code is as follows

.jumbotron{
    text-align:center;
   	background-color:#FFFFFF;
}

.jumbotron img {
	max-width:100%;
	height:auto;
}

html {
	height:100%;
	min-height:100%;
}

html  body{
	height:100%;
	min-height:100%;
}

html body .container{
	height:100%;	
	min-height:100%;
}

.container {
  width: 60%;
  //height:95%;
  height:98%;
  margin: 0 center;
  box-sizing: content-box;
  border-style: solid;
  margin-left:auto;
  margin-right:auto;
  margin-top:25px;
  margin-bottom:25px; 
}

li {
list-style-type: none;
margin: 0 auto; /* Added */
    float: none;
}

ul {
	margin: 0 auto; /* Added */
    float: none;
	padding:0px;
}
.card {
	margin: 0 auto; /* Added */
    float: none; /* Added */	
}

#search{
	text-align:center;
	margin-right:30px;
}

input {
   display:block;
   width: 350px;    
}

p{
   text-align:center;
}

#search-footer{
	margin-top:30px;
    margin-left:auto;
    margin-right:auto;	
}

#search-group {
	margin-left:0px;
	width:600px;
}

#group {
	margin-left:25px;
	text-align:left;
}

button {
  height:40px;
}

label {
 text-align:left;
}

@media (min-width: 768px) {
.card{
    margin: 5 auto;
}
}

@media (min-width: 576px) {
.card {
	margin:5 auto;
}
}

Open in new window


I had tried overflow hidden and auto for container.  I get scroll bar for the container.  I don't want scrolling inside container  I want to scroll from outside container and on the browser not on the container.  Please help me in resolving this issue.

With Many Thanks,

Bharath AK
tosend.png
LVL 1
Bharath A.KAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Julian HansenCommented:
You have set a height of 98% on your container - this will constrain the height of the container.

You also have fixed widths on your cards of 15rem - again forcing the card to a specific width - rather use 100% - if that is too wide for large screens then put in a media query to put the 15rem back for larger screens if required.

Your search input also has a fixed width of 350px which is going to force it outside of its containers.

For responsive design - stay way from absolute widths - use percentage of container - then manage your container's for the different screen sizes.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Bharath A.KAuthor Commented:
Hi Julian,

I haven't followed you suggestion.  Yours might be the best practice.  But I have fixed temporarily this with workaround as mention by stackoverflow solution.   https://stackoverflow.com/questions/8468066/child-inside-parent-with-min-height-100-not-inheriting-height 

Making the parent container as table and child div as table-cell.   now it working temporarily.  I have to follow you suggestion to make a permanent fix.

Thanks your explanation and suggestion.

Regards,
Bharath AK
0
Julian HansenCommented:
You are welcome.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Development

From novice to tech pro — start learning today.