Flexbox not rendering correctly on IE and Chrome browsers

Initially, I avoided using flexboxes because of concerns about older browser support. However, the alternative involved floats, margins, z-indexes, and resulted in a layout that was visually unattractive.

Despite setting specific dimensions for the left-hand date block, I encountered issues with its width and height adjusting unexpectedly in both IE and Chrome.

https://jsfiddle.net/yuum08d9/

<style>
    body {
        font: 13px / 23px Roboto, sans-serif;
    }
    #Experience {

    }

    ...
    // The rest of the CSS code is unchanged
  
</style>


<div id="Experience" class="Block">
    <h4>
        Work Experience
    </h4>
    <div class="Experience">
        <div class="Date">
            <div>
                <h6 class="H6">January 2015 -<br />Present</h6>
            </div>
            <span class="Angle"></span>
        </div>
        <div class="WorkExperience">
            <h6>Boundary Protection Engineering <span>U.S. Air Force</span></h6>
            <p>System Administrator of $10 billion United States Air Force Intra-Network (AFIN) Boundary Protection Cyberspace Security and Control System Weapon System (CSCS/WS) responsible for 1,070 firewalls, proxies, and VPN’s across 121 geographically separated locations...

      ...  
       // The rest of the HTML code remains the same
      
</div>

Answer №1

To ensure that the Date element maintains its width without shrinking to fit (the default behavior), you must specify flex-shrink: 0

#Experience .Experience .Date {
    flex-shrink: 0;                       /*  added  */
    height: 160px;
    width: 172px;
    position: relative;
    display: block;
}

Check out the updated fiddle here

Answer №2

I encountered a similar issue with flex that also involved problems with absolutely positioned child divs inside flex containers in Firefox. Due to this, I recommend avoiding the use of flex for the reasons you mentioned and for better cross-browser compatibility.

Instead of using flex, I switched to using the viewport-based metrics vw, vh, and vmin (vm for IE). These units are connected to the viewport size and allow for flexible layouts with clean code. They can also be used with fonts for more responsive designs.

You can see a demonstration of this in action on JSFiddle. This demo works in all browsers and is fully responsive.

Here's the code snippet:

body {
font: 13px / 23px Roboto, sans-serif;
}
#Experience {

}

#Experience h4 {
color: #262626;
font: normal normal 300 normal 23px / 29.12px Roboto, sans-serif;
}
  
.H6{
text-align: center;
display: inline-block;
border: 2px solid #404040;
width: 20vw;
float: left;
background-color: #f1f1f1;
margin: 2vw;
}
  
.WorkExperience{
border: 2px solid #404040;
width: 50vw;
margin-left: 18vw;
padding: 2vw;
}
<div id="Experience" class="Block">
<h4>
Work Experience
</h4>
<div class="Experience">
<div class="Date">
<div>
<h6 class="H6">January 2015 -<br />Present</h6>
</div>
<span class="Angle"></span>
</div>
<div class="WorkExperience">
...

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

Unable to authenticate an HTML form using PHP and Apache 2

In my website's footer, there is a form that I am trying to run using a PHP file located at 127.0.0.1/form.php on localhost. I learned that PHP code inside HTML is commented out, and according to the PHP Documentation, the PHP file needs to be run dir ...

Modifying the Background Color of a Header in React Native

As a newcomer to React Native, I am attempting to change the background color of the header bar (Navigation Bar). Here are some approaches that I have tried: return ( <View style={styles.container}> <NavigationBar titl ...

Reduce the count of products when the button is clicked

Hey there! I'm running a special promotion on my website with limited spots available at a reduced price. I'd love to have a real-time counter that shows the number of remaining spots, decreasing by one each time someone clicks the 'sign up& ...

Issues with Collapse Feature on Bootstrap 3 Navbar

I need your help with a problem I'm facing. The navigation bar is not collapsing when I click the link in mobile view. Check out this video for more details: https://www.youtube.com/watch?v=2dBpcFMjqY0 ...

Why does the for loop assign the last iteration of jQuery onclick to all elements?

I've encountered an issue with my code that I'd like to discuss var btns = $('.gotobtn'); $('#'+btns.get(0).id).click(function() { document.querySelector('#navigator').pushPage('directions.html', myInf ...

Expanding a responsive HTML background image using Javascript

I've spent countless hours grappling with this code, attempting to dynamically resize the background of HTML based on the browser window size using JavaScript. Here's what I have so far (I'm using Firefox for this): GM_addStyle('body ...

display and conceal a division by clicking a hyperlink

How can I make a hidden div become visible when clicking on a specific link without using jQuery? Javascript function show() { var a = document.getElementsByTagName("a"); if (a.id == "link1") { document.getElementByID("content1").style.v ...

Troubleshooting problems with the width of CSS grid underlines within a scrolling container

There seems to be an issue with the underlining border in this example not extending across the entire width of the container. Any suggestions on how to resolve this would be greatly appreciated. .outer-container { width: 200px; overflow: auto; } . ...

Animating or transitioning CSS keyframes to an inline value when the page is initially loaded

In my current project, I am working on creating HTML and CSS-based bar representations of percentage values. The structure of the code is as follows: Using HTML: <div class="chart"> <div class="bar" style="width:43%"></div> </div&g ...

Issue with Navbar collapse button not displaying items on Bootstrap 4.5.0 in combination with Next.js version 9.4.4

I'm currently working on a nextjs demo project where I'm incorporating bootstrap for styling purposes. The initial setup was straightforward as I installed bootstrap using npm and included it in my app.js. import 'bootstrap/dist/css/bootstra ...

Switch from manipulating the DOM to using Angular binding to update the td element with fresh information

When I click the edit button on a tr Element, the tdElement for the redirectUrl should become editable. By using the id of the tdElement and changing the contenteditable attribute to true, I can then use JQuery to retrieve the newly typed data. <tr ng- ...

Tips for verifying user input prior to taking action

I am fairly new to internet languages and I am trying to understand how to validate user input before calling a method, but I have not been successful so far. <html> <head> </head> <body> <?php $gr ...

Using an inline-block within a positioned absolute element

I am curious about the behavior of inline-block elements inside absolutely positioned elements. To better explain, I have provided an example below. We can see in the code snippet why the .icon within the .tag is not displayed like the previous .icon (whic ...

Is it possible to create and access a PDF file using file handling in PHP?

In my PHP code, I am utilizing file handling to write and then read a PDF file. However, after successfully creating the PDF file, I encounter an issue where I am unable to open it. When attempting to open the file, Adobe Reader displays an error message s ...

Unable to get font-face to function properly on IE versions 7 and 8

I'm having trouble getting the font-face to work properly on both IE7 and IE8. This is the code snippet I have used: @font-face { font-family: 'DroidSans'; src: url('fonts/DroidSans.eot'); src: url('fonts/DroidSa ...

A mysterious JavaScript snippet that automatically scrolls down when the webpage is loaded

Recently, I encountered an issue with a mysterious JavaScript script that automatically scrolls down when entering the page (I suspect it's JavaScript). I've tried to investigate using Firebug, examining the code, deleting scripts, and even remov ...

Grab the code snippet from JSFiddle

I apologize for the seemingly simple question, but I have been struggling with it. I tried looking at similar questions, but I couldn't find a solution. Despite copying the code from http://jsfiddle.net/sB49B/21/, I can't seem to get it to work ...

Restrict the input to only allow for parentheses, disallowing any letters or numerical characters

Only parentheses are allowed in the input field; letters and numbers will not be accepted. function checkBrackets() { var inputVal = document.getElementById("input").value; var result = document.getElementById("strong").value; console.log(inputVal, ...

Is it possible to style a nested ID with CSS?

Imagine a scenario where you are working within an HTML file that you cannot modify, but you have the ability to only edit the CSS through a stylesheet. Is it possible to target an ID within another ID in the same way you can do with classes? #id1 #id2 {s ...

HTML template with three columns where the content spills over the edges, despite having a visible border and a height of 100%

I have a wrapper containing 3 divs: <div id="wrapper"> <div id="leftbar"> Lorem ipsum dolar sit amet </div><!--LEFTBAR--> <div id="middle"> Lorem ipsum dolar sit amet </div><!--middle--> <div id="rightbar"&g ...