Grow element to fit content, but do not exceed parent-CodePudding

I want to have an element - .errorMessages, grows to fit the content (a div with overflow-y: auto to show scrollbar), but do not exceed parent space.

The HTML looks something like this:

<div class="modalBox"> <!-- this changes with window size -->
  <div class="content">
    <table class="vtable" style="width: 350px;">
      <!-- this needs to expand, but not more than the content -->

      ...
    </table>
    <div class="errorMessages flex">
        <!-- this needs to expand, but not more than the content -->
      <div>
        <ul>
          <li>an error message</li>
          <li>another error message...</li>
          <li>another error message...</li>
          <li>another error message...</li>
          <li>another error message...</li>
          <li>another error message...</li>
          <li>another error message...</li>
          <li>another error message...</li>
        </ul>
      </div>
    </div>
  </div>
  <div><input type="button" value="Close" class="button blue" />
  </div>
</div>

How it looks like:

CodePudding user response：

Give a certain height in rem to your .content class. Then give desired heights in percentage to your .vtable and .errorMessages classess.

<div class="modalBox"> <!-- this changes with window size -->
  <div class="content" style="height: 10rem">
    <div class="vtable" style="width: 350px; height: 50%; overflow-y: auto;">
      <!-- this needs to expand, but not more than the content -->
      <div>
        <ul>
          <li>an error message</li>
          <li>another error message...</li>
          <li>another error message...</li>
          <li>another error message...</li>
          <li>another error message...</li>
          <li>another error message...</li>
          <li>another error message...</li>
          <li>another error message...</li>
        </ul>
      </div>
      ...
    </div>
    <div class="errorMessages flex" style="width: 350px; height: 50%; overflow-y: auto;">
        <!-- this needs to expand, but not more than the content -->
      <div>
        <ul>
          <li>an error message</li>
          <li>another error message...</li>
          <li>another error message...</li>
          <li>another error message...</li>
          <li>another error message...</li>
          <li>another error message...</li>
          <li>another error message...</li>
          <li>another error message...</li>
        </ul>
      </div>
    </div>
  </div>
  <div><input type="button" value="Close" class="button blue" />
  </div>
</div>

By the way, watch out to use proper HTML semantics, for example the table element.

CodePudding user response：

You can try to solve this with the calc() function.

Create a variable to define .vtable height.
In errorMessages set two height properties min-height and max-height
min-height = calc(100% - var(--vtable-height))
And the max-height we will set the same height as the .vtable with the variable.

Show code snippet

*,
::after,
::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

:root {
  --vtable-height: 100px;
}

.modalBox {
  padding: 1em;
}

.vtable {
  height: var(--vtable-height);
  width: 350px;
  display: block;
  margin-bottom: 5px;
  border-spacing: 0;
  border-collapse: collapse;
}

.vtable td,
.vtable tr,
.vtable th {
  border: 1px solid rgb(204, 204, 204);
}
.vtable td {
  width: 100%;
  text-align: left;
}
.vtable th {
  min-width: 120px;
  text-align: right;
}

.vtable th,
.vtable td {
  padding: 0.25em 0.5em;
}
.errorMessages {
  min-height: calc(100% - var(--vtable-height));
  max-height: var(--vtable-height);
  border: 1px solid rgb(0, 47, 255);
  overflow-y: auto;
}

<div class="modalBox">
      <!-- this changes with window size -->
      <div class="content">
        <table class="vtable">
          <!-- this needs to expand, but not more than the content -->
          <tr>
            <th>Status</th>
            <td>error</td>
          </tr>
          <tr>
            <th>Prograss</th>
            <td>0</td>
          </tr>
          <tr>
            <th>Successfull</th>
            <td></td>
          </tr>
        </table>
        <div class="errorMessages flex">
          <!-- this needs to expand, but not more than the content -->
          <div>
            <ul>
              <li>an error message</li>
              <li>another error message...</li>
              <li>another error message...</li>
              <li>another error message...</li>
              <li>another error message...</li>
              <li>another error message...</li>
              <li>another error message...</li>
              <li>another error message...</li>
            </ul>
          </div>
        </div>
      </div>
      <div><input type="button" value="Close" class="button blue" /></div>
    </div>