My left sidebar's content is not following the overflow:hidden rule in browsers other than Chrome. Instead of being limited to 300 pixels of the .container div, it extends in Firefox, IE, and Edge. Any ideas on how to fix this issue?
My left sidebar's content is not following the overflow:hidden rule in browsers other than Chrome. Instead of being limited to 300 pixels of the .container div, it extends in Firefox, IE, and Edge. Any ideas on how to fix this issue?
Consider making the following adjustment:
.flex-fill {
display:flex;
min-height: 0;
flex:1 1 0%;
}
instead of
.flex-fill {
display:flex;
flex:1 1 auto;
}
This change addresses a couple of issues that may be causing the problem:
Firstly, IE does not recognize unitless flex-basis. For this reason, using flex: 1 1 0% or flex: 1 1 0px is necessary instead of flex: 1 1 0. Additionally, flex: 1 1 auto does not work in this situation.
Secondly, there are discrepancies in how Chrome and Firefox interpret display: flex. Firefox sets
min-height: auto; min-width: auto;display: flex elements, while Chrome sets it as min-height: 0; min-width: 0. The desired behavior aligns more with Chrome's interpretation.
This simple adjustment may not resolve all issues, but it appeared to function correctly when tested on IE and Firefox. If further problems persist, consider implementing similar changes in other classes based on the explanations provided. Hopefully, this solution proves helpful!
Your code has been modified with a few changes:
<div class="container">
<div class="flex-col flex-fill">
<div class="flex-row flex-fill">
<div class="flex-col flex-50 dragscroll default-box" style="margin-right:5px;">
<div class="button selected">1</div>
<div class="button">2</div>
<div class="button selected">3</div>
<div class="button">4</div>
<div class="button">5</div>
<div class="button selected">6</div>
<div class="button selected">7</div>
<div class="button">8</div>
<div class="button">9</div>
<div class="button">10</div>
</div>
<div class="flex-fill default-box">
center
</div>
<div class="flex-250 default-box" style="margin-left:5px;">
side
</div>
</div>
<div class="default-box flex-50" style="margin-top:5px;">
bottom
</div>
</div>
</div>
.container {
width:500px;
height:300px;
display:flex;
flex-flow:column;
background:lightblue;
}
.buttons-container {
min-height:1px;
height:100%;
flex:0 1 50px;
border:1px solid #CCC;
background:#FFF;
margin-right:5px;
overflow:hidden;
display:flex;
flex-flow:column;
}
.flex-col {
display:flex;
flex-flow:column;
overflow:hidden;
}
.flex-row {
display:flex;
flex-flow:row;
overflow:hidden;
}
.flex-fill {
display:flex;
flex:1 1 auto;
}
.flex-50 {
display:flex;
flex:0 0 50px;
}
.flex-250 {
display:flex;
flex:0 0 250px;
}
.default-box {
background:#FFF;
border:1px solid #CCC;
}
.plot-area {
display:block;
position:relative;
flex:1 1 auto;
background:#FFF;
border:1px solid #CCC;
box-shadow:1px 1px 4px rgba(0,0,0,0.1);
}
.button {
background:#cfeceb;
vertical-align:middle;
margin-bottom:5px;
text-align:center;
color:#56b6b2;
cursor:pointer;
font-size:26px;
flex:1 1 auto;
display:flex;
flex-direction:column;
justify-content:center;
min-height:50px;
}
.button.selected {
background:#56b6b2;
color:#FFF;
}
.button:last-child {
margin:0 !important;
}
Is there a way to create a grid layout with divs that leave space on the left side of each subsequent row? For example, having 4 div boxes in the first row, 3 in the second, 2 in the third, and so on. Demo https://i.sstatic.net/Gli6L.png Styling in CSS ...
I have successfully created a mailto URL for Outlook (web version), but now I am facing challenges with implementing it on the web version OWA. Here is the URL that I am struggling with: <a href='https://company.domain.com/owa/?ae=Item&a=New& ...
I am currently working on creating a chat application using JavaScript (AngularJS without jQuery) and I am wondering if it is possible to have a scrollable div load to the bottom automatically. While I am familiar with the scrollTo JS property, I do not f ...
I'm working on a div section and I want it to come down and rotate when a button is clicked. However, after moving to the bottom, it doesn't rotate as expected but instead returns to its initial position along the Y axis. How can I fix this issue ...
Is there a way to set the max-height for a tr or td element that is specifically supported in Chrome? Previously, an answer suggested at this link did not work for Chrome: How to fix height of TR? ...
My grid view is structured as follows: jQuery(window).resize(function(evt) { jQuery(".grid-content > div > div > .channelImage").height(jQuery(".grid-content > div > ...
This is a unique template <html lang="en"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <title>My Amazing Website</title> ...
I need help with upgrading from Vuetify/Vue 2 to Vue 3. I don't have much experience in front-end development, but I am responsible for updating some old code to keep things running smoothly. The migration guide is not very clear and assumes a certain ...
My current project involves the use of javascript, html, nodejs, express, and mysql to fetch values from a database and send them back to the html interface. In this setup, the user inputs a domain in the 'btnSearch' textbox and clicks on the Lo ...
As mentioned in the title, I am looking to ensure that the rows have the same spacing as the container. I am currently using Bootstrap 5, so when you preview the HTML on Stack Overflow, it may not appear exactly as intended. To provide a clearer understand ...
The Issue I've been struggling to make this google maps API example function correctly. Even after directly copying the code from Google's website, the example fails to display properly. For instance, the map doesn't show up, the search bar ...
Struggling with setting the value of a MUI Textfield that has type="file" props, resulting in the following exception being thrown: Uncaught DOMException: An attempt was made to use an object that is not, or is no longer, usable Interest ...
my $refer = $ENV{HTTP_REFERER}; my $gk1 = substr($str1, -4); if ($gk1 = .swf) { my $antigk = "gk detected"; } else { my $antigk = $link; } I am encountering issues with this code after making some modifications. What could be causing the errors? I ...
I have a pretty simple website setup. On the left side, I have a tree menu (using the Telerik component), and when a choice is made from the tree, the main content of the page is populated with static HTML content. Each tree click triggers a full page relo ...
As a novice developer, I am seeking advice on my current project. I am in the process of creating a platform where users can upload images and tag them. After researching various methods of storing tags, I came across the following structure: Tag Storag ...
I am currently working with an HTML table and my goal is simple. I want to create a menu that opens when the mouse hovers over it, but within a table. When I hover my mouse over the <span>Telephone:</span> element, I want the <div class="se ...
Since upgrading from Django 2.1 to 3, the file field in Django admin is now displaying as "loading". https://i.sstatic.net/8JDWu.png An error is appearing in the console. https://i.sstatic.net/RCgwt.png https://i.sstatic.net/78YtG.png Previously, ther ...
Below is a JSON sample containing 2 objects that I am fetching: [{"project_id":"538","proyecto":"Caja","tarea":"DEF","fecha_termino":"00-00-00","estado":"Vencido","nombre_completo":"Christiano Ronaldo","alerta":"-Analista responsable: Lionel Messi.; &bsol ...
During the development of my PWA, I encountered an unexpected behavior with caching. I included a test .html page for testing purposes that was not supposed to be cached in the sw.js folder. Additionally, I added some external links for testing. However, w ...
I am looking to divide my window into two equal parts, with the same height but each taking up 50% of the width. Here is the CSS I used: .container { display: flex; height : 100%; } .column { flex: 1; height : 100%; } .column-one ...