Ensure that the flex item expands to occupy the vacant space left when other child elements are deleted

I am facing an issue with multiple children inside a parent container that has the CSS properties display: flex and flex-direction: column.

There is a toggle button on the webpage which removes one of the children when clicked.

The problem I need to solve is making sure that the table height expands to fill all the remaining space when any child is removed.

.parent {
  border: black 1px solid;
  height: 260px;
  display: flex;
  flex-direction: column;
}

.child {
  padding: 5px;
}

#table {
  display: table;
  height: 160px;
}

.tr {
  display: table-row;
  padding: 5px;
}

.td {
  display: table-cell;
  padding: 5px;
  width: 150px;
  border: #000000 solid 1px;
  margin: 5px;
}
<div class="parent">
  <div class="child">
    Child1
  </div>
  <div class="child">
    Child2
  </div>
  <div class="child">
    Child3
  </div>
  <div class="child">
    <div id="table">
      <div class="tr">
        <div class="td">Row 1, <br />Column 1</div>
        <div class="td">Row 1, Column 2</div>
        <div class="td" style="background:#888888;"></div>
      </div>
      <div class="tr">
        <div class="td">Row 2, <br />Column 1</div>

        <div class="td" style="background:#888888;"></div>
        <div class="td">Row 2, Column 2</div>
      </div>
    </div>
  </div>
</div>

CodeSandbox Link

After removing Child2, the table shifts up but doesn't adjust its height, causing scrollbars to appear within the table content.

htmlcssflexbox

Answer №1

Allow the items to be flexible in order to expand and fill up the available space.

 .parent {
   border: black 1px solid;
   height: 260px;
   display: flex;
   flex-direction: column;
 }

 .child {
   padding: 5px;
 }
 
 .child:last-child {
   flex-grow: 1; /* consume available space */
   
   /* provide flexibility to child (table element) */
   display: flex;
   flex-direction: column;
 }

 #table {
   display: table;
   /* height: 160px; */
   height: 100%; /* full height, but will not overflow container because of
                    default flex-shrink: 1 */
 }

 .tr {
   display: table-row;
   padding: 5px;
 }

 .td {
   display: table-cell;
   padding: 5px;
   width: 150px;
   border: #000000 solid 1px;
   margin: 5px;
 }
<div class="parent">
  <div class="child">Child1</div>
  <div class="child">Child2</div>
  <div class="child">Child3</div>
  <div class="child">
    <div id="table">
      <div class="tr">
        <div class="td">Row 1, <br />Column 1</div>
        <div class="td">Row 1, Column 2</div>
        <div class="td" style="background:#888888;"></div>
      </div>
      <div class="tr">
        <div class="td">Row 2, <br />Column 1</div>
        <div class="td" style="background:#888888;"></div>
        <div class="td">Row 2, Column 2</div>
      </div>
    </div>
  </div>
</div>

<hr>

<div class="parent">
  <div class="child">Child1</div>
  <div class="child">Child2</div>
  <div class="child">
    <div id="table">
      <div class="tr">
        <div class="td">Row 1, <br />Column 1</div>
        <div class="td">Row 1, Column 2</div>
        <div class="td" style="background:#888888;"></div>
      </div>
      <div class="tr">
        <div class="td">Row 2, <br />Column 1</div>
        <div class="td" style="background:#888888;"></div>
        <div class="td">Row 2, Column 2</div>
      </div>
    </div>
  </div>
</div>

<hr>

<div class="parent">
  <div class="child">Child1</div>
  <div class="child">
    <div id="table">
      <div class="tr">
        <div class="td">Row 1, <br />Column 1</div>
        <div class="td">Row 1, Column 2</div>
        <div class="td" style="background:#888888;"></div>
      </div>
      <div class="tr">
        <div class="td">Row 2, <br />Column 1</div>
        <div class="td" style="background:#888888;"></div>
        <div class="td">Row 2, Column 2</div>
      </div>
    </div>
  </div>
</div>

Answer №2

Applying flex: 0 1 100%; to the .child elements will make them occupy all available space, ensuring that the div.child containing the table will extend to the full height of its parent if there are no other .child divs present. Additionally, since your table currently has a fixed height of 160px, you can adjust it to match its parent by setting it to 100% or specifying a min-height of 100%.

.parent {
  border: black 1px solid;
  height: 260px;
  display: flex;
  flex-direction: column;
}

.child {
  padding: 5px;
  flex: 0 1 100%; /* ensure children expand fully */
}

#table {
  display: table;
  height: 100%; /* match parent size */
}

.tr {
  display: table-row;
  padding: 5px;
}

.td {
  display: table-cell;
  padding: 5px;
  width: 150px;
  border: #000000 solid 1px;
  margin: 5px;
}
<div class="parent">
  <div class="child">
    <div id="table">
      <div class="tr">
        <div class="td">Row 1, <br />Column 1</div>
        <div class="td">Row 1, Column 2</div>
        <div class="td" style="background:#888888;"></div>
      </div>
      <div class="tr">
        <div class="td">Row 2, <br />Column 1</div>

        <div class="td" style="background:#888888;"></div>
        <div class="td">Row 2, Column 2</div>
      </div>
    </div>
  </div>
</div>

Answer №3

The table height cannot automatically adjust because you have specified a fixed height.

To create spacing between items, you can use justify-content: space-around or justify-content: space-between on the parent element. Additionally, adding flex: 1 to the .child elements will help keep the items spaced out evenly.

If you want the table to fill the available space, you can set its height to 100%. In this case, you may need to remove the .child wrapper from the table structure.

.parent {
  border: black 1px solid;
  height: 400px;
  display: flex;
  flex-direction: column;
}

.child {
  padding: 5px;
  flex: 1;
}
#table {
  display: table;
  height: 100%;
}
.tr {
  display: table-row;
  padding: 5px;
}
.td {
  display: table-cell;
  padding: 5px;
  width: 150px;
  border: #000000 solid 1px;
  margin: 5px;
}
<div class="parent">
  <div class="child">
    Child1
  </div>
  <div class="child">
    Child2
  </div>
  <div class="child">
    Child3
  </div>

  <div id="table">
    <div class="tr">
      <div class="td">Row 1, <br />Column 1</div>
      <div class="td">Row 1, Column 2</div>
      <div class="td" style="background:#888888;"></div>
    </div>
    <div class="tr">
      <div class="td">Row 2, <br />Column 1</div>

      <div class="td" style="background:#888888;"></div>
      <div class="td">Row 2, Column 2</div>
    </div>
  </div>
</div>

Answer №4

Utilize the Css attribute flex-grow: 0; on the .child Css. When it comes to the table, this will be overridden by the configuration in the .child:last-child clause.

function toggleChild ( eve ) {
  let s_idButton = (eve.target.tagName.toLowerCase() === "button") ? eve.target.id : eve.target.parentNode.id
    , s_idChild = s_idButton.replace("b", "c")
    , e_child = document.querySelector(`#${s_idChild}`)
    , s_state = e_child.style.display
    ;

e_child.style.display = (s_state === "none") ? "flex" : "none";
  document.querySelector(`#${s_idButton} > span`).textContent = (e_child.style.display === "none") ? "Show" : "Hide";
} // toggleChild

function ready ( eve ) {
  Array.from(document.querySelectorAll('button'))
    .forEach ( (pe_b) => { pe_b.addEventListener( 'click', toggleChild ); } );
} // ready

window.addEventListener( 'load', ready );
.parent {
   border: black 1px solid;
   height: 260px;
   display: flex;
   flex-direction: column;
 }

 .child {
   padding: 5px;
   flex-grow: 0; /* helps in consuming available space */
 }

 .child:last-child {
   flex-grow: 1; /* consumes available space */

   /* give flexibility to child (table element) */
   display: flex;
   flex-direction: column;
 }

 #table {
   display: table;
   /* height: 160px; */
   height: 100%; /* full height; will shrink to fit container because of
                    default flex-shrink: 1 */
 }

 .tr {
   display: table-row;
   padding: 5px;
 }

 .td {
   display: table-cell;
   padding: 5px;
   width: 150px;
   border: #000000 solid 1px;
   margin: 5px;
 }
<div class="parent">
  <div id="c1" class="child">
    Child1
  </div>
  <div id="c2" class="child">
    Child2
  </div>
  <div id="c3" class="child">
    Child3
  </div>
  <div id="c4" class="child">
    <div id="table">
      <div class="tr">
        <div class="td">Row 1, <br />Column 1</div>
        <div class="td">Row 1, Column 2</div>
        <div class="td" style="background:#888888;"></div>
      </div>
      <div class="tr">
        <div class="td">Row 2, <br />Column 1</div>

        <div class="td" style="background:#888888;"></div>
        <div class="td">Row 2, Column 2</div>
      </div>
    </div>
  </div>
</div>

<button id="b1"><span>Hide</span> Child #1</button>
<button id="b2"><span>Hide</span> Child #2</button>
<button id="b3"><span>Hide</span> Child #3</button>

Note

I misinterpreted OP's needs in my initial response (due to reading too quickly ...). This solution has been rectified.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Embedding content within various ng-template elements

I'm currently working on developing a button component (app-button) that can utilize multiple templates based on the parent component using it. <div class="ds-u-margin-left--1 ds-u-float--left"> <ng-container *ngTemplateOutlet="icon">< ...

htmlangular

Maximizing Efficiency on the Frontend: Balancing Requests with Caching

I am currently tackling a large website that has accumulated quite a bit of technical debt that needs to be addressed. The site contains a significant amount of JavaScript and CSS files being loaded. Currently, these files are aggregated and minified in la ...

javascripthtmlcssperformancefrontend

Tips for creating dynamic rope animations with canvas and CSS3 styling

Interested in creating a canvas animation, or possibly using CSS3 for the same purpose. Looking to add an automatic rope animation, similar to it swaying gently. I've searched for scripts and other solutions, but haven't found anything suitable. ...

htmlipadcsscanvasjquery-animate

My website, powered by Wordpress, is currently experiencing an issue with excessive whitespace being added to the bottom of the contact form 7 plugin. I am perplexed as to the cause of this issue and

Recently, I've come across an issue with my contact form 7 plugin, which has been integrated into the front-page.php file using the code below: <div id="contact" class="pad-section"> <div class="container"> <h1>Contact Us</ ...

jquerycsswordpresspluginscontact-form-7

Tips for customizing the color of mat-select placeholder text?

I've been attempting to modify the color of a mat-select placeholder. It functions properly when using 'background-color' but not when using 'color'. Below is my CSS code: /deep/ .mat-select-placeholder { color: red; } .mat-s ...

cssangularangular-material-5

SWF file redirection with a flash blast

How can I implement a click event and redirect on an embedded SWF object? I currently have the following code, but it doesn't appear to be working: <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia. ...

htmlflash

How can you generate a distinct id value for each element within an ngFor iteration in Angular 4?

I encountered an issue where I must assign a distinct id value to each data row within my *ngFor loop in angular 4. Here is the code snippet: <div *ngFor="let row of myDataList"> <div id="thisNeedsToBeUnique">{{ row.myValue }}</div> & ...

htmlangulartypescript

Adjust the text placement on the toggle switch to turn it On or Off

I am looking to create a toggle switch with a small size. I found some code on Stack Overflow that I tried but it didn't work as expected. The code snippet I attempted to use is from another helpful post. My goal is to have the "on" text align to th ...

htmlcss

Tweaking the placement of the dropdown menu in the subnavigation area

Just getting back into coding after a long hiatus - I've dabbled in the past but it's been about 6 years since I've worked with any code. Currently, I'm working on replicating a website for practice. I have created a nav bar and a drop ...

htmlcssmenudropdownstyling

What is the process for integrating a personalized font into the <head> section of the ConvertTo-HTML?

I created a script to generate an HTML file containing information about the services on a computer, along with some additional styling. $a = "<style>" $a = $a + "BODY{background-color:peachpuff;}" $a = $a + "TABLE{border-width: 1px;border-style: so ...

htmlcsspowershellfonts

Styling a nested scrollbar using JQuery

I am looking to customize two scrollbars using a jquery plugin or JS library. Here is the HTML code: <div id="container"> <div class="fixedHeightContainer"> <div class="fixedHeightContent"> Lorem ipsum dolor sit amet, con ...

javascriptjqueryhtmlscrollbar

CSS Priority - determining the ultimate winner

I have an upcoming exam and I'm reviewing the previous exam paper that was given to me. The question is: When multiple style sheet rules are applied to the same element, which type of rule takes precedence? a. Any declaration from the browser b. ...

css

Using @Input to pass data from a parent component to a

Looking to modularize the form code into a separate component for reusability? Consider using @Input and referencing it in the HTML to pass values to the post method. Here's how you can achieve this: Previously, everything worked smoothly when all th ...

htmlangulartypescriptformspost

extract element from a string with the help of jquery

When using AJAX to request HTML from a page, the process involves sending a request like this: function getHTML() { //set ajax call var options = { url: '/Controller', type: 'GET', d ...

javascriptjqueryhtmlajaxtypes

Calculate the sum of hours worked in a day using pure JavaScript, no external libraries required

Hello, I'm new to this website and please excuse me if my English is not perfect, I am trying my best to communicate :) I have been working on a page that calculates the total hours worked in a day and this is what I have achieved so far until 15/06 ...

javascriptcsshtml

Searching for a column fails to yield any results after altering the value in

Here is a snippet of code that I am working with: <!DOCTYPE HTML> <html lang="en"> <head> <title> Exact matches overview </title> <script type="text/javascript" src="/static/s ...

javascriptjqueryhtmldatatables

Utilizing Selenium for the Upload of an APK Document

I've encountered an issue during my test. I'm attempting to upload an APK file, but the process seems to halt at that stage. My attempts with simple sendKeys using the file path and an AutoIT script have both proven unsuccessful. Below is my in ...

javahtmlangularjsseleniumautomated-tests

Can a custom structural directive be utilized under certain circumstances within Angular?

Presently, I am working with a unique custom structural directive that looks like this: <div *someDirective>. This specific directive displays a div only when certain conditions are met. However, I am faced with the challenge of implementing condit ...

htmlangulartypescriptangular-structural-directive

Exploring the application of URL parameters in HTML code

How can I use URL parameters retrieved with Javascript in my HTML? <script> var url_string = window.location.href; //window.location.href var url = new URL(url_string); var c = url.searchParams.get("name"); console.log(c); </script> I am tryi ...

javascripthtmlurlweb

The width of the menubar dynamically adjusts upon mouse hover using CSS

I encountered a problem with my menu and submenu. When I hover over the list elements in the main menu, the width of the menu items changes abruptly which looks confusing. I tried fixing the width, but then there is too much space between the menu items. ...

css