Here is a snippet of generic CSS (SCSS) style for flex:
.flex {
display: flex;
&.v {
flex-direction: column;
}
&.h {
flex-direction: row;
}
> * {
flex: 0 0 auto;
}
> .fill {
flex: 1 1 auto;
}
&.auto {
overflow: auto;
}
}
While this code works perfectly in Chrome, the scroll bar behaves differently in MS-Edge. Instead of appearing within the inner panel, it extends across the entire screen.
Any suggestions on how to resolve this issue?
This issue occurs on both Edge and Firefox due to the default min-height of a flex column item being set to auto, preventing it from being smaller than its content.
To fix this, simply add min-height: 0 to the <div class="fill flex h"> element.
Check out the code snippet below:
html, body {
height: 100%;
margin: 0;
}
.flex {
display: flex;
}
.flex.v {
flex-direction: column;
}
.flex.h {
flex-direction: row;
}
.flex > * {
flex: 0 0 auto;
}
.flex > .fill {
flex: 1 1 auto;
}
.flex.auto {
overflow: auto;
}
.flex.minheight {
min-height: 0; /* added */
}<div class="flex v" style="height: 100%;">
<div>head</div>
<div class="fill flex h minheight">
<div style="background-color: green;">side</div>
<div class="fill flex v auto" style="background-color: red;">
<div style="height: 1000px;">long content</div>
</div>
</div>
<div>foot</div>
</div>If you also need this to work on IE, you can include the following CSS rule specifically for IE:
_:-ms-fullscreen, :root .flex.fill_ie {
flex: 1 1 0%;
}
Here's an updated version of the code snippet with the IE-specific rule included:
html, body {
height: 100%;
margin: 0;
}
.flex {
display: flex;
}
.flex.v {
flex-direction: column;
}
.flex.h {
flex-direction: row;
}
.flex > * {
flex: 0 0 auto;
}
.flex > .fill {
flex: 1 1 auto;
}
.flex.auto {
overflow: auto;
}
.flex.minheight {
min-height: 0; /* added */
}
_:-ms-fullscreen, :root .flex.fill_ie {
flex: 1 1 0%; /* added */
}<div class="flex v" style="height: 100%;">
<div>head</div>
<div class="fill flex h minheight">
<div style="background-color: green;">side</div>
<div class="fill flex v auto" style="background-color: red;">
<div style="height: 1000px;">long content</div>
</div>
</div>
<div>foot</div>
</div>I am struggling with a div wrapper that has a border, but the border is not wrapping around the content and I can't figure out why. Here is my issue on screen: This is what I want it to look like: Below is my HTML code: <div class="event_area_t ...
Having trouble displaying static images in Gmail when using django python-postmark for mailing. Gmail is appending a url proxy to the src of the images, which causes them not to display properly. What might I be missing here? How can I solve this issue? Th ...
My website was created using WordPress, with various plugins added to enhance its functionality. However, I have encountered an issue when viewing the site in Internet Explorer 8 & 9. The visual effects of the plugins seem to lose all CSS styling in IE bro ...
Utilizing Material-UI and JSS for CSS management, I've encountered an issue where styles appear differently in development versus production. The discrepancy stems from the order of rules within the file. For instance, when defining an element like ...
$("a[href*='youtube']").attr('rel', 'prettyPhoto'); Having some trouble targeting links on a page containing "youtube" in the URL. I'm trying to set their rel attribute to "prettyPhoto" so they open in a lightbox window. ...
When using Selenium WebDriver, I am facing an issue with selecting an item from a drop-down list. The element I want to click on is labeled as "game club". Despite attempting to select different elements, I keep encountering an error stating that none of ...
I am trying to design a uniquely shaped button that sits on top of an image, but I am encountering some challenges with the scaling of the button mask. Both the image and masks were created at the same base dimensions for easy alignment at 0,0. Here is a ...
Currently, I have a traditional select dropdown that is data-bound with Angular. <select class="form-control" ng-model="category"> <option value="work">Work</option> <option value="home">Home</option> <option valu ...
I am currently working with a react-bootstrap carousel component. The issue I am facing is that the carousel jumps when it scrolls due to the images having different sizes. If I try to fix this by setting the size with weight: 1309px and height: 730px, th ...
I'm facing the same issue as yesterday: trying to extract and utilize parameters from the URL within my HTML page using AngularJS. What am I doing wrong? The parameter I need to work with is: https://url.com/index.html?user I aim to retrieve the "u ...
Eliminating the table borders and applying color to alternate rows. Check out my code snippet: https://stackblitz.com/angular/dnbermjydavk?file=app%2Ftable-overview-example.ts. ...
In my latest project, I have designed a component that utilizes multiple checkboxes generated within a .map function. While testing the functionality, it came to my attention that users could select more than one checkbox at a time. This is not ideal as th ...
Whenever I click a button, an ajax call is triggered to load various html code into a div with the id 'main'. While displaying the html content is not an issue, integrating and applying css and js code to my current page has proven to be challeng ...
I'm trying to figure out how to update the value of an HTML DOM element that is bound from a TypeScript file in each iteration of a for loop, rather than at the end of the loop. I want to see all values as the loop is running. For example, imagine I ...
Why isn't the CSS code filling up 100% of the screen? I have 5 columns with a width of 20% floating left. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset= ...
Let me explain... I've designed a button that, when clicked, opens a link such as https://www.something.com/something/?term=something or [initially, I suspected it was a URL issue... so I experimented with other options] Like:- https://www.somet ...
Every time I apply sx to a component that is rendered as a string and then displayed using dangerouslySetInnerHtml, the styles within the sx prop do not work. Here is an example showcasing the issue: Codesandbox: https://codesandbox.io/p/sandbox/wonderfu ...
As I explore various questions related to the "simple" multiplication tables, I find myself with a more fundamental query. I am seeking clarity on how Javascript operates when intertwined with HTML, as that is where my confusion lies. In my multiplication ...
My contact form has server side validation in place to ensure that required fields are filled out. However, I'm facing an issue where if a user fails to enter information into a required field and presses the send button, no email is sent. On the othe ...
I have been experiencing issues with the row and col classes in Bootstrap. <!DOCTYPE html> <html lang="en> <head> <meta charset="utf-8> <meta http-equiv="X-UA-Compatible" content="IE-edge> <meta name="viewport" content=" ...