How to set Bootstrap modal height fixed when data-slide occurs for Carousel

Question

I'm trying to use carousel effect inside BootStrap modal, here if data-slide size of fist modal-body gets differed due to lesser content in second slide the size of second div is minimized to smaller height.

Is there a possible way to have fixed size for all carousel-item while performing data-slide??

   <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
            <h4 class="modal-title" id="myModalLabel">Title</h4>
          </div>
          <div class="modal-body">
           <div class="header">                        
                <p class="note">Header Note</p>    
            </div>       
            <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="false">
                      <div class="carousel-inner" role="listbox">
                        <div class="carousel-item active">
                         <div id="postage-due-details">
                          <p>This is First Page</p>
                            <span class="content-label">APR 1</span><br/>
                            <span>XXXXXXXXXXXX</span><br/>
                            <span class="content-label">XXXXXXXXX</span><span class="content-value">XXXX</span><br/>
                            <span class="content-label">XXXXXXXXXX</span><span class="content-value"> XXX</span><br/>
                            <span style="margin-top: 0px;margin-bottom: 3em;">XXXXXX</span>
                            <span style="float: right;">
                            <input type="submit" class="btn btn-primary" name="pay-shortpay" value="Pay Now"
                             href="#carousel-example-generic" id="paynowbtn" data-slide="next">
                            </span>
                            <hr style="padding: 5px;"></hr>
                            <span>XXXXX</span><br/>
                            <span>XXXX</span><br/>
                            <span>XXXXXXXX</span><br/>
                            <span>XXXXXX</span><br/>
                            <span>XXXXXX</span>
                            <span style="float: right;">
                            <input type="submit" class="btn btn-primary" name="pay-shortpay" href="#carousel-example-generic" id="paynowbtn" value="Pay Now" data-slide="next">
                            </span>
                       </div>
                        </div>
                        <div class="carousel-item">
                         <p>This is Second Page</p>
                         <input type="submit" class="btn btn-primary"  href="#carousel-example-generic" id="paynowbtn" value="Go Back" data-slide="prev">
                         <div id="preview-amount-wrapper">

                         </div>
                        </div>
                      </div>
                </div>
          </div>
        </div>
      </div>
    </div>

Example:

http://www.bootply.com/opdfUNQsDy

Both need to have same height

Answer 1

CSS

.modal-content{
  height: 300px;
  overflow: scroll;
}

It will give a fixed height.