Expand the element to accommodate the content, ensuring it does not surpass the boundaries of its parent

Question

Expand the element to accommodate the content, ensuring it does not surpass the boundaries of its parent

I am looking to create an element called .errorMessages that can grow to accommodate content (with a div set to overflow-y: auto to display a scrollbar), while still remaining within the boundaries of its parent container.

The structure of the HTML is as follows:

<div class="modalBox"> <!-- this size adjusts based on window -->
  <div class="content">
    <table class="vtable" style="width: 350px;">
      <!-- this should expand, but not surpass the content width -->

      ...
    </table>
    <div class="errorMessages flex">
        <!-- this should adjust in size, but not exceed the content area -->
      <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>

Preview images: https://i.sstatic.net/keQpb.png https://i.sstatic.net/0c9ft.png

html css

Answer 1

Answer №1

Set a specific height in rem for your .content class. Then assign desired heights in percentage to your .vtable and .errorMessages classes.

<div class="modalBox"> <!-- adjusts based on window size -->
  <div class="content" style="height: 10rem">
    <div class="vtable" style="width: 350px; height: 50%; overflow-y: auto;">
      <!-- this should expand, but not exceed the content's height -->
      <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 should expand, but not exceed the content's height -->
      <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>

Also, ensure to use appropriate HTML elements, like the table element, when developing your code.

Answer 2

Set a specific height in rem for your .content class. Then assign desired heights in percentage to your .vtable and .errorMessages classes.

<div class="modalBox"> <!-- adjusts based on window size -->
  <div class="content" style="height: 10rem">
    <div class="vtable" style="width: 350px; height: 50%; overflow-y: auto;">
      <!-- this should expand, but not exceed the content's height -->
      <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 should expand, but not exceed the content's height -->
      <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>

Also, ensure to use appropriate HTML elements, like the table element, when developing your code.

Answer 3

Answer №2

Currently, I have come up with a simple workaround to address this issue. However, I cannot consider it as a definitive solution because it does not effectively resolve the initial problem. My main objective is to determine if there is a way to achieve this without relying on JavaScript.

The approach I am currently implementing involves setting the entire .content section to overflow-y: auto. Meanwhile, I refrain from making any adjustments to .errorMessages, allowing it to expand according to the content. By placing the close button outside of .content, it remains visible. I then establish the height of .content by using calc(100% - var(--close-button-height)).

Although this method is not perfect, it serves its purpose adequately and maintains a satisfactory visual appearance.

<style type="text/css">
  .border {
      border: 1px solid red;
  }

  .modalBox {
      border-color: blue;
      height: 90vh;

  }

  .modalBox .content {
      background-color: #fffeec;
      border-color: #09c900;
      height: calc(100% - 48px);
      /*max-height: calc(100% - 40px);*/
      /*margin-bottom: 40px;*/
      overflow-y: auto;
  }

  .modalBox .content .table {
      border-color: gray;
  }
  .modalBox .errorMessages {
      margin-top: 10px;
      border-color: red;
      background-color: #ffecec;
      height: fit-content;
  }
  .modalBox .errorMessages .errorsContent {
      min-height: 50px;
  }
  .modalBox .buttons {
      background-color: rgba(0, 181, 173, 0.1);
      height: 42px;
      box-sizing: border-box;
      padding: 10px;
      text-align: center;

  }

  </style>

<div class="modalBox border">

  <div class="content border">
<div class="table border">
  content<br />
  table<br />
  placeholder<br />
</div>
<div class="errorMessages border">
  <div class="errorsContent">
  <ul>
    <li>error1</li>
    <li>error1</li>
    <li>error1</li>
    <li>error1</li>
    <li>error1</li>
    <li>error1</li>
    <li>error1</li>
    <li>error1</li>
    <li>error1</li>
    <li>error1</li>
    <li>error1</li>
    <li>error1</li>
    <li>error1</li>
    <li>error1</li>
    <li>error1</li>
    <li>error1</li>
    <li>error1</li>
    <li>error1</li>
    <li>error1</li>
    <li>error1</li>
    <li>error1</li>
    <li>error1</li>
    <li>error1</li>
  </ul>
  </div>
</div>
  </div>
  <div class="buttons">
<input type="button" value=" Close " />
  </div>
</div>

Answer 4

Currently, I have come up with a simple workaround to address this issue. However, I cannot consider it as a definitive solution because it does not effectively resolve the initial problem. My main objective is to determine if there is a way to achieve this without relying on JavaScript.

The approach I am currently implementing involves setting the entire .content section to overflow-y: auto. Meanwhile, I refrain from making any adjustments to .errorMessages, allowing it to expand according to the content. By placing the close button outside of .content, it remains visible. I then establish the height of .content by using calc(100% - var(--close-button-height)).

Although this method is not perfect, it serves its purpose adequately and maintains a satisfactory visual appearance.

<style type="text/css">
  .border {
      border: 1px solid red;
  }

  .modalBox {
      border-color: blue;
      height: 90vh;

  }

  .modalBox .content {
      background-color: #fffeec;
      border-color: #09c900;
      height: calc(100% - 48px);
      /*max-height: calc(100% - 40px);*/
      /*margin-bottom: 40px;*/
      overflow-y: auto;
  }

  .modalBox .content .table {
      border-color: gray;
  }
  .modalBox .errorMessages {
      margin-top: 10px;
      border-color: red;
      background-color: #ffecec;
      height: fit-content;
  }
  .modalBox .errorMessages .errorsContent {
      min-height: 50px;
  }
  .modalBox .buttons {
      background-color: rgba(0, 181, 173, 0.1);
      height: 42px;
      box-sizing: border-box;
      padding: 10px;
      text-align: center;

  }

  </style>

<div class="modalBox border">

  <div class="content border">
<div class="table border">
  content<br />
  table<br />
  placeholder<br />
</div>
<div class="errorMessages border">
  <div class="errorsContent">
  <ul>
    <li>error1</li>
    <li>error1</li>
    <li>error1</li>
    <li>error1</li>
    <li>error1</li>
    <li>error1</li>
    <li>error1</li>
    <li>error1</li>
    <li>error1</li>
    <li>error1</li>
    <li>error1</li>
    <li>error1</li>
    <li>error1</li>
    <li>error1</li>
    <li>error1</li>
    <li>error1</li>
    <li>error1</li>
    <li>error1</li>
    <li>error1</li>
    <li>error1</li>
    <li>error1</li>
    <li>error1</li>
    <li>error1</li>
  </ul>
  </div>
</div>
  </div>
  <div class="buttons">
<input type="button" value=" Close " />
  </div>
</div>

Expand the element to accommodate the content, ensuring it does not surpass the boundaries of its parent

Answer №1

Answer №2

Similar questions

Images in the background that adapt to the screen size

Difficulty in smoothly changing background image using JQuery

A guide to extracting text from HTML elements with puppeteer

Steps for retrieving the image URL after clicking on an image within a list of images

Google Chrome's number input type trims its rendering

Explore a webpage for links, navigate through them, and retrieve pages that do not contain any links using R programming

How to Execute a Java Method Using a JavaScript Function?

Bootstrap 4 image gallery with thumbnails sizing

Do not exceed 3 elements in a row when using Bootstrap's col-auto class

"Add some pizzazz to your website with Animate.css - Animate your

Is it not possible to check the server control checkbox in ASP.NET?

Encountering a Django Channels issue while loading the JavaScript wrapper

Centering text using CSS Bootstrap

all elements with equal height within a flexbox positioned at the bottom

Divide HTML content while keeping inner tags intact

Changing the color of text in one div by hovering over a child div will not affect the

Beginner attempting to comprehend Safari CSS font-size test outcomes

I am having trouble with the browser detection not accurately identifying the browser I am currently using

Applying absolute positioning to the router-outlet element in Angular2 using CSS

"Encountering an Internal Server Error while trying to submit the