CODEWITHSUNDEEP
cssflexboxheight
Merlin04
Merlin04

Reputation: 2317

How do I make an element be the maximum height it can be without causing the page to scroll?

I have a dialog box:

$(document).ready(function() {
  $('.ui.modal').modal('show');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.js"></script>


<div class="ui overlay fullscreen modal">
  <div class="header">
    Dialog box
  </div>
  <div class="content">
    <div class="ui warning message">
      <div class="header">
        Be careful
      </div>
      This is a warning message
    </div>
    <div style="background-color: blueviolet">This is the container.<br />This is the container.</div>
  </div>
  <div class="actions">
    <div class="ui approve button">Save</div>
    <div class="ui cancel button">Cancel</div>
  </div>
</div>

I want the purple div (the one that says "This is the container") to have the largest height possible without making the page scroll, like this:

How the dialog box should work

I've tried using height:100%, but it doesn't do anything. How can I get the result in the picture without using a pixel value for the height?

Upvotes: 1

Views: 166

Answers (1)

Michael Benjamin
Michael Benjamin

Reputation: 370993

Make the container (.content) a flex container in column direction.

Add flex: 1 to the purple box.

Add this to your CSS:

.ui.modal > .content {
    display: flex;
    flex-direction: column;
}

.ui.modal > .content > div:last-child {
    flex: 1;
}


$(document).ready(function() {
  $('.ui.modal').modal('show');
});
.ui.modal > .content {
    display: flex !important;
    flex-direction: column;
}

.ui.modal > .content > div:last-child {
    flex: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.js"></script>


<div class="ui overlay fullscreen modal">
  <div class="header">
    Dialog box
  </div>
  <div class="content">
    <div class="ui warning message">
      <div class="header">
        Be careful
      </div>
      This is a warning message
    </div>
    <div style="background-color: blueviolet">This is the container.<br />This is the container.</div>
  </div>
  <div class="actions">
    <div class="ui approve button">Save</div>
    <div class="ui cancel button">Cancel</div>
  </div>
</div>

Upvotes: 1

Related Questions