Is it possible to employ flexbox CSS to stack four tables on top of each other, allowing for resizing up to the maximum height of the window?

After experimenting with various setups, I have yet to find a complete solution. My objective is to have 4 tables stacked on top of each other, each starting just below 1/4 of the browser height. I want the ability to resize each table vertically, making them larger or smaller. Additionally, I want 3 other tables to adjust their size as the manipulated table changes.

The code I have attempted causes the 4 tables to expand beyond the browser view and they do not shrink back. I understand that "resize: vertical" is not a feature of flexbox, but it is necessary for my requirements.

Previously, I have successfully used flexbox with rows to expand/shrink horizontally, so I assumed the same concept would apply for switching from row to column orientation.

Is it possible to achieve my desired layout using flexbox?

Here is the html code:

<ul class="4tables">
 <li class="flexible CFS"><table id="table_CFS"></table></li>
 <li class="flexible MFS"><table id="table_MFS"></table></li>
 <li class="flexible SES"><table id="table_SES"></table></li>
 <li class="flexible SAAS"><table id="table_SAAS"></table></li>
</ul>

And here is the css code:

ul.4tables {
  display: flex;
  flex-flow: column nowrap;
  max-height: 99vh;
}

li.flexible {
  flex: 1 1 auto;
  flex-basis: auto;
  height:21vh;
  resize: vertical;
  overflow: scroll;
}

Thank you for any assistance.

Answer №1

When I tested it, I found that it only works when the viewport is fullsize. The issue lies in the fact that the units vw and vh are always in relation to the viewport size, so the code won't work properly if the viewport is not at fullsize.
To address this, I recommend using position: absolute for the tables element. Just make sure to include position: relative for the wrapper element.

.tables-wrapper {
  position: relative;
  width: 400px;
  height: 600px;
  border: 1px solid #f0f
}
.tables {
  display: flex;
  flex-flow: column nowrap;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.flexible {
  flex: 1 1 auto;
  height: 25%;
  resize: vertical;
  overflow: scroll;
}
<div class="tables-wrapper">
  <div class="tables">
    <div class="flexible"></div>
    <div class="flexible"></div>
    <div class="flexible"></div>
    <div class="flexible"></div>
  </div>
</div>

If you want to make it fullscreen, simply remove the tables-wrapper element.

.tables {
  display: flex;
  flex-flow: column nowrap;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.flexible {
  flex: 1 1 auto;
  height: 25%;
  resize: vertical;
  overflow: scroll;
}
<div class="tables">
  <div class="flexible"></div>
  <div class="flexible"></div>
  <div class="flexible"></div>
  <div class="flexible"></div>
</div>

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

What are some ways to customize the appearance of my ReactJS application while it's being viewed on Chrome on

I'm currently in the process of running my ReactJS app on a Panasonic Vierra Smart TV browser. After importing core-js and babel-polyfill, I managed to load the webpage but encountered an issue with the UI alignment. The styling does not display corre ...

What is the best way to extract information from a website and save it directly to Google Sheets? Specifically interested in current data from an environmental monitoring system

I have a unique environmental monitoring device that I acquired from a company that has since shut down. This device is equipped with an NDIR CO2 sensor, temperature, and relative humidity sensors. In addition, it features an ethernet port and a built-in w ...

An error that cannot be recovered from occurred: Trying to access a method called viewConfessionLikes() that is

Greetings! I am currently facing an issue on my website where the page displaying the most liked post is showing an error message: Fatal error: Call to undefined method Confession::viewConfessionLikes() on line 55 Unfortunately, this page is not showing a ...

Purchase Masonry Supplies for Optimal Arrangement

I've been using a neat little tool called jquery-isotope to create a masonry style layout for the blog posts on my website. It's set up with two columns, showcasing two different post types - long form articles and image-only posts. The masonry ...

Having trouble getting the image to stack in the center above the text on mobile devices

When viewing the website on a desktop, everything appears correctly. However, there seems to be an issue with responsiveness on mobile and tablet devices. Specifically, I want to ensure that the image of team members stacks above their respective bio parag ...

Alter the status of a checkbox programmatically

There are two checkboxes available: <input type="checkbox" id="id3"></input> <input type="checkbox" id="id4"></input> The desired functionality is that when clicking on id3, id4 should also be checked. Initially, this works as e ...

Exploring the Functionality of POST in AJAX Requests

I'm facing an issue where the data is not displaying on my page even though I am using a Github URL and Ajax POST. Can anyone help me identify what needs to be fixed in the code below? <div id="content"> </div> window.onload = ...

Creating tables and defining their structure with jQuery for HTML can be done using the following steps

I have retrieved values from the database in a variable by parsing it from JSON format. Now, I need to generate an HTML table structure as shown below: <table class="table dataList fiberEngg"> <tbody> <tr> <td& ...

Tips for consistently positioning a div beneath another div in HTML/CSS

Would appreciate it if you could review this. <.div id="main"> Main Div <./div> <br/> <.div id="sub">Sub-Division<./div> ...

Showing text instantly upon clicking a radio button, in real-time

I'm working with a set of radio buttons that are linked to numbers ranging from 1 to 24. I need to show the selected number in another part of the page when a radio button is clicked. What would be the best way to achieve this? ...

instructions for creating a hover effect where one div vanishes when hovering over another div

Is there a way to make the line visible when hovering over my circular div? #line { display: none } <div id='circle'> <div id= 'line'> ...

Error: Cannot access 'addEventListener' property of null in Chrome Extension due to TypeError

I've been working on developing a chrome extension that autofills input forms in web pages. However, I encountered an error that says "cannot read properties of null." This issue arises when I try to add an event listener to a button in my code. The f ...

Modifying the dimensions of an image within a :before pseudo-element

Currently, I am working on designing a mobile menu and encountered an issue with resizing the image of the hamburger menu button. Despite attempting to adjust it by following some suggestions such as this one: How to Resize Image Using CSS Pseudo-elements ...

What is the process for automatically activating the Enter key once moving to the next text input field?

Hey everyone, I am looking for a way to automatically trigger the enter button after the user switches to another HTML input type='text'. This is necessary for form validation. Below is the code snippet: <input type="text" class="form-contro ...

Align two spans within a div using the margin auto property

I often find myself struggling with the basics, it seems like I can't figure this out. I want the two spans to be centered within the div with auto margins... https://jsfiddle.net/5k4pnmf7/ <div class='foo'> <span class='bar& ...

"Creating a new element caused the inline-block display to malfunction

Can someone explain why the createElement function is not maintaining inline-block whitespace between elements? Example problem First rectangle shows normal html string concatenation: var htmlString = '<div class='inline-block'...>&l ...

Maintain Open State of Toggle Drop Down Menu

Having an issue with the toggle down menu or list on my webpage. The problem is that the menu is constantly open (the #text_box) when the page loads. My intention was for it to be closed initially, and then open only when the user clicks on the 'Ope ...

Creating a consistent height for Bootstrap 5 Carousel items with varying sizes

I am currently utilizing Bootstrap 5 carousel to display a collection of user-uploaded images that vary in height and width. I am seeking to create a carousel with responsive height and scaled/filled images. Below is the HTML + CSS code snippet I am using ...

What is the best way to adjust the scroll speed within a specific element using React?

Hey there, I'm currently working on adjusting the scroll animation of a div (MUI Container) to make it smoother and slower. I've spent some time searching online for a solution but haven't found anything helpful so far... By the way, I' ...

Tips for managing the submission process for dynamically generated formsORStrategies for

<tr> <form role="form" class="manualImportSubmit" action="http://localhost:5000/XXX" method="post"> <td><input name="yyy" value="FormAValue" type="hidden">TestA</td> <td><input name="before_year" class="fo ...