CSS - Issue with table cell height exceeding in Mozilla Firefox and Internet Explorer

Examining the code below

<div style="border:solid 5px orange;width:400px;height:400px">
<div style="display:table;border:solid 1px red;width:100%;height:100%">
    <div style="display:table-row;border:solid 1px blue">
        <div style="display:table-cell;border:solid 1px green;height:100%">
            <div style="height:100%;background:yellow;overflow-y:auto">CONTENT
            <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>sss
            </div>
        </div>
    </div>
    <div style="display:table-row;border:solid 1px blue">
        <div style="display:table-cell;border:solid 1px green;height:100px">
            <div>INPUT</div>
        </div>
    </div>
</div>

In Chrome, the CONTENT area is sized correctly based on the available space for the table cell. However, Firefox and IE increase the size of the table cell to accommodate the content. Is there a way to make Firefox and IE behave like Chrome in this case?

Refer to this example on Fiddle: http://jsfiddle.net/2p6Jx/

UPDATE : I cannot use fixed height, the table should adjust according to its parent element's height and width

Update 2: By adding display:-moz-stack, the issue was resolved in Firefox. Now, the problem remains only with IE (http://jsfiddle.net/2p6Jx/3/)

csshtmlwebcss-tables

Answer №1

I made some changes to your code and now it is compatible with IE, Firefox, and Chrome.

<div style="border:solid 5px purple;width:300px;height:500px">
    <div style="display:table;border:solid 1px blue;width:100%;height:100%">
       <div style="display:table-row;height:250px;width:100%;">
            <div style="display:table-cell;">
                <div style="background:pink;overflow-y:auto;height:250px;">
                    NEW CONTENT
                    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>sss
                </div>
            </div>
       </div>
        <div style="display:table-row;height:150px;width:100%;">
            <div style="display:table-cell;border:solid 1px yellow;height:150px">
                <div>NEW INPUT</div>
            </div>
        </div>
    </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

Modifying Copyright Feature in Footer

I am attempting to implement this function within my dark-colored footer: import Typography from '@material-ui/core/Typography'; function Copyright() { return ( <Typography variant="body2" color="textSecondary" align="center"> ...

javascripthtmlcssreactjsmaterial-ui

The website's navigation system effectively directs content within the initial 100% viewport

I have encountered a slight issue. I created a Sidebar Navigation with some added "hey's" to demonstrate the problem: * { margin: 0; padding: 0; font-family: 'Roboto', sans-serif; } nav { height: 100vh; width: 250px; borde ...

htmlcss

How can you utilize jQuery to eliminate specific select field values from the DOM prior to submission?

I am currently working on a Squarespace form that utilizes jQuery to show/hide specific fields in order to create a customized form using the show(); and hide(); functions. $(".option2 select").hide(); The issue I am facing is that simply hiding the fiel ...

jqueryhtmlcsssquarespace

How to retrieve a nested array element in JavaScript

Here is the Pastebin link of the index.html file for reference: http://pastebin.com/g8WpX6Wn (The file contains broken image links and no CSS styling). If you would like to access the entire project, you can download the zip file. I am currently working ...

javascriptjqueryhtmlarraysfor-loop

Creating an HTML Canvas using an AngularJS template

I am facing an issue with rendering html elements on a canvas using html2canvas JS. I am utilizing AngularJS for data binding on the html page, but unfortunately, the dynamic data is not showing up on the canvas generated from these html elements. For inst ...

javascripthtmlangularjscanvas

Unchecking and checking the radio button is necessary in order for it to function properly

Today, I'm puzzled by the odd behavior of my radio buttons in a pixel drawer project. In order for the radio button to function properly, I have to uncheck it and then recheck it. The pixel drawer allows me to change colors and sizes using these radio ...

javascripthtmlradio-button

How can a JavaScript function be used to check a tag's status?

I currently have two select tags on my webpage. I want to ensure that only one option can be selected at a time from these two tags. If the user tries to select options from both tags, an error message should be displayed instructing them to choose only on ...

javascriptjqueryhtmldom

Expanding the size of one div causes the surrounding divs to shift positions

I am currently working on creating a row of divs that expand when hovered over by the mouse. I have managed to achieve this functionality, but now I want the expanding div to cover its neighboring divs partially, without affecting their sizes or moving the ...

javascripthtmlcss

Using the getElementById function in javascript to modify CSS properties

Here is the setup I am working with: <div id="admin"> This element has the following style applied to it: display: none; I am attempting to change the display property when a button is pressed by defining and utilizing the following JavaScript co ...

javascripthtmlcss

Change the order of numbering in ordered lists

I am seeking a way to change the ordering of an ordered list to be in descending order. You can view a live example here. Instead of having the counter span multiple ol elements, I would like the counter to reset after each ol. For the live demo, the des ...

javascriptjqueryhtmlcss

Tips for transferring information from Angular 6 to Node.js

Having recently delved into Angular 6 for the first time, I find myself tasked with sending data to a Node.js server. The code snippet below illustrates my approach within an Angular function: import { Component, OnInit } from '@angular/core'; ...

htmlnode.jsangularangular6

Tips for personalizing and adjusting the color scheme of a menu in ant design

I am currently working on a website using reactJs and ant design. However, I have encountered an issue with changing the color of a menu item when it is selected or hovered over. Here's the current menu: Menu Image I would like to change the white col ...

javascriptcssreactjsmenuitemantd

Wordpress articles refuse to appear side by side

I've been at it for hours now, trying to solve this issue with no luck. I have a Wordpress loop on my homepage that displays post thumbnails vertically, but I want them to appear in sets of three images before starting a new line. Here's the cod ...

phpcsswordpress

Implementing user-driven filtering in a React table

When a user clicks on the submit button, data will be loaded. If no filter is applied, all data will be displayed. const submit = async (e: SyntheticEvent) => { e.preventDefault(); const param = { ...(certificateNo && ...

javascripthtmlreactjsapireact-hooks

Is there a way to display x squared as a superscript inside a button element?

In my reactjs project, I am developing a basic calculator. One of the buttons is supposed to calculate x squared, and I tried using the <sup> HTML element for this purpose but it did not work as expected. <Button name = "x<sup>2</sup> ...

htmlreactjs

Changing the order of rows and columns with CSS3 and DOM manipulation

I have implemented the following CSS code to alternate the background color of li elements. However, I am facing an issue where I need the CSS styling to remain consistent even if the rows have the .hidden class applied to them (with .hidden class having d ...

csscss-selectors

Webpage refreshing when resizing browser

Hey there, I'm facing an issue where my HTML website restarts whenever the browser size changes. Can someone please help me fix this? You can check out my website here I have uploaded my code files here: Code Files Link ...

javascripthtmlcssreload

Assigning a value using HTML code causes the input to malfunction

Trying to create a website with the goal of updating the database is proving to be challenging. The issue lies in the fact that some attributes from the database are in HTML format. Whenever I attempt to set an input's value to match the current attri ...

html

Add a hyperlink alongside every row in the table

My table comprises three columns in each row, and I am looking to include a link next to each row. <table> <th> Name: </th> <th> Price: </th> <th> Description </th> ...

htmlcss

Changing the icon dynamically when a user unfollows through an AJAX request

I have created a follow icon (button) that allows signed-in users to click on it and add the game to their list using AJAX. However, I need help with switching the button icon and class. I'm not very familiar with JavaScript or AJAX. This is the cur ...

phphtmlmysqlajax