将子元素设为父元素最大高度的100％高度

Question

I'm working on a modal layout and struggling to pass height context from a parent element to its child element. Take a look at this CodePen , .child-child needs to be the same height as .child .

One solution to this is changing max-height: 50%; to height: 50%; ; this isn't usable because sometimes the modal won't contain that much content and should only be as high as the content it contains, then when there's a lot of content it shouldn't be able to exceed it's max-height .

Another solution is to go for flexbox and setting .child as a flex container which will set .child-child full height which flex containers do by default; you can see that in action in this CodePen . This actually works great in most browsers and does exactly what I need, but completely fails in IE10/11+; note that I'm using autoprefixer in the CodePen settings so I doubt this'll be a flexbox syntax issue. Maybe I need to add some other flex properties for IE such as flex-grow / flex-shrink etc. I've tried a bunch of different combinations with not much luck, I also can't seem to find this specific bug with Google either.

Any help would be greatly appreciated!

Answer 1

I think that the only possibility solution is making .child scrollale with overflow-y:scroll;.

My Demo.

.parent {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: red;
}

.child {
 background: blue;
 max-height: 50%;
 max-width: 600px;
 width: 100%;
 position: absolute;
  top: 50%;
 left: 50%;
transform: translate(-50%, -50%);
padding: 20px;
overflow-y:scroll;
}

.child-child {
 background: green;
  height: 100%;
 overflow: auto;
}
 <div class="parent">
      <div class="child">
     <div class="child-child">
      <p>Blah.</p>
       <p>Blah.</p>
       <p>Blah.</p>
       <p>Blah.</p>
       <p>Blah.</p>
       <p>Blah.</p>
       <p>Blah.</p>
       <p>Blah.</p>
       <p>Blah.</p>
       <p>Blah.</p>
       <p>Blah.</p>
       <p>Blah.</p>
       <p>Blah.</p>
       <p>Blah.</p>
       <p>Blah.</p>
       <p>Blah.</p>
       <p>Blah.</p>
     </div>
   </div>
 </div>

Edit If you want to put the button you can BUT you must set position:relative to .child and position:fixed to the button;

Working DEMO.

Edit If you want to position the buttom on right you must use right:calc((100% - 600px)/2);.

Working DEMO.

PS see calc() browser support there.

Answer 2

I think that the only possibility solution is making .child scrollale with overflow-y:scroll; .

My Demo .

 .parent { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: red; } .child { background: blue; max-height: 50%; max-width: 600px; width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 20px; overflow-y:scroll; } .child-child { background: green; height: 100%; overflow: auto; } 

 <div class="parent"> <div class="child"> <div class="child-child"> <p>Blah.</p> <p>Blah.</p> <p>Blah.</p> <p>Blah.</p> <p>Blah.</p> <p>Blah.</p> <p>Blah.</p> <p>Blah.</p> <p>Blah.</p> <p>Blah.</p> <p>Blah.</p> <p>Blah.</p> <p>Blah.</p> <p>Blah.</p> <p>Blah.</p> <p>Blah.</p> <p>Blah.</p> </div> </div> </div> 

PS If you want to keep the padding you have to apply overflow-y:scroll; to a child container.

Edit If you want to put the button you can BUT you must set position:relative to .child and position:fixed to the button;

Working DEMO .

Edit If you want to position the buttom on right you must use right:calc((100% - 600px)/2); .

Working DEMO .

PS see calc() browser support there .

Answer 3

Is this what you're looking for?

 $(document).ready(function() { $('.plus-btn').on('click', function() { $(this).closest('.parent').toggleClass('active'); }); }); 

 *{ box-sizing: border-box; } .parent { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: red; } .top-right { position: absolute; top: 0; right: 0; } .plus-btn { overflow: hidden; position: relative; cursor: pointer; width: 20px; height: 20px; display: inline-block; background: #f0f0f0; } .plus-btn span { position: absolute; margin: 45% 10%; width: 80%; height: 10%; background: #222; border-radius: 4px; pointer-events: inherit; -webkit-transition: -webkit-transform .3s; transition: transform .3s; } .plus-btn span:first-child { -webkit-transform: rotate(0deg); transform: rotate(0deg); } .plus-btn span:last-child { -webkit-transform: rotate(90deg); transform: rotate(90deg); } .parent.active .plus-btn span:first-child { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .parent.active .plus-btn span:last-child { -webkit-transform: rotate(45deg); transform: rotate(45deg); } .child { background: blue; max-height: 50vh; max-width: 600px; width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 20px; } .child-child { background: green; overflow-y: auto; width: 100%; height: 100%; max-height: 0; -webkit-transition: max-height .3s; transition: max-height .3s; } .parent.active .child-child { max-height: calc(50vh - 40px); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="parent"> <div class="child"> <div class="top-right"> <div class="plus-btn"> <span></span> <span></span> </div> </div> <div class="child-child"> <p>Blah.</p> <p>Blah.</p> <p>Blah.</p> <p>Blah.</p> <p>Blah.</p> <p>Blah.</p> <p>Blah.</p> <p>Blah.</p> <p>Blah.</p> <p>Blah.</p><p>Blah.</p> <p>Blah.</p> <p>Blah.</p> </div> </div> </div>