IE 10 users may encounter issues when trying to use Flexbox

Hello, I am currently working with a flexbox grid for a gallery layout. The goal is to have the first division occupy two columns and maintain responsiveness across different devices. Everything is functioning as intended except in IE10, where the flexbox behavior becomes erratic causing the 2-column div to expand excessively.

To see the code in action, visit: http://codepen.io/HendrikEng/pen/wzRQNJ

CSS :

.c-showcase {
  width: 100%;
  float: left;
  margin-left: 0;
  margin-right: 0;
}
.c-showcase::after {
  clear: both;
  content: '';
  display: table;
}

.c-showcase-quote {
  width: 50%;
  float: left;
}

.c-showcase-item {
  width: 25%;
  float: left;
}
.c-showcase-item::after {
  clear: both;
  content: '';
  display: table;
}

.c-showcase {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.c-showcase-block {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

img {
  display: block;
  height: auto;
  width: 100%;
}

.c-showcase-quote {
  background: black;
  color: white;
}

HTML:

<div class="c-showcase">
  <div class="c-showcase-block">
    <div class="c-showcase-quote">
      <h2 class="c-showcase-quote__title c-showcase-quote__title_outline_black">BLA BLA BLA</h2>
      <p class="c-showcase-quote__content">blablalbl</p>
    </div>
    <div class="c-showcase-item">
      <div class="o-image-container">
        <img src="http://placehold.it/350x350">
      </div>
    </div>
    <div class="c-showcase-item">
      <div class="o-image-container">
        <img src="http://placehold.it/350x350">
      </div>
    </div>
    <div class="c-showcase-item">
      <div class="o-image-container">
        <img src="http://placehold.it/350x350">
      </div>
    </div>
    <div class="c-showcase-item">
      <div class="o-image-container">
        <img src="http://placehold.it/350x350">
      </div>
    </div>
    <div class="c-showcase-item">
      <div class="o-image-container">
        <img src="http://placehold.it/350x350">
      </div>
    </div>
    <div class="c-showcase-item">
      <div class="o-image-container">
        <img src="http://placehold.it/350x350">
      </div>
    </div>
    <div class="c-showcase-item">
      <div class="o-image-container">
        <img src="http://placehold.it/350x350">
      </div>
    </div>
  </div>
</div>
htmlcssflexbox

Answer №1

Avoid using float:left; for flex children as it pertains to the box model. Instead, consider implementing the following CSS:

.c-showcase-block {
  display: flex;
  flex-wrap: wrap;
}
.c-showcase-quote {
  flex: 0 0 50%;
}
.c-showcase-item {
  flex: 0 0 25%;
}

For a prefixed version, you can use:

.c-showcase-block {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
}
.c-showcase-quote {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 50%;
     -moz-box-flex: 0;
      -ms-flex: 0 0 50%;
          flex: 0 0 50%;
}
.c-showcase-item {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 25%;
     -moz-box-flex: 0;
      -ms-flex: 0 0 25%;
          flex: 0 0 25%;
}

If you want these styles to apply only at certain widths, enclose them within a media query. Remember that the flex property is a shorthand for flex-grow, flex-shrink, and flex-basis in that respective order.

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

Disappearing fixed div in Chrome when hovering over links

I've encountered a strange issue while working on my website (beta.kylehorkley.com). When I hover over the links in the sidebar, the sidebar disappears momentarily and then reappears about a second later. This problem is occurring in Chrome and Opera ...

htmlcssgoogle-chrome

Is there a way to make a div rotate from one of its ends rather than its center with atan2() method?

I want the div.stick in the following code to rotate based on a different origin point. Currently, it rotates from the center but I would like it to rotate from the bottom of the stick instead. The rotation should occur when the mouse is aligned with the t ...

javascriptjqueryhtmlmathrotation

Tips for transferring data to a different webpage while ensuring that dynamic elements remain active

Is There a Solution to Making Dynamic Elements Persist After Page Load and Transfer Data to the Next Page? I'm struggling with adding a new row that includes both a checkbox and textbox. I've been using the Clone() method to generate a new row, ...

javascriptc#jqueryhtmlasp.net

Spread out the items within an inline block

Is there a way to create space between icons that are in an inline block without them touching each other? One solution could be to add a container around each icon, center the icons within the containers, and then place the containers in the block. You c ...

htmlcss

CSS stylized horizontal navigation bar completed

* { border: 0px; margin: 0px; padding: 0px; } body { background-color: #FFC; } #wrapper { width:70%; margin: 0% auto; } #header { background-color: #C1D1FD; padding: 3%; } #nav { clear:both; padding: auto; position:inherit; background-color:#F0D5AA; wid ...

htmlcss

Trouble arises when attempting to create a two-column layout using Material UI's <Grid> component

My goal is to create a two-column layout where each column takes up half of the screen and has equal height. To better illustrate, take a look at this image. The code I've tried so far is not working as expected: import React from "react"; import { ...

javascriptreactjsflexboxmaterial-ui

Overlap elements without using absolute positioning and prevent resizing distortion

Looking to incorporate a line with tick marks and a ball (similar to a scale) into my design. Some tutorials recommend using absolute positioning or float for this effect. While these methods work partially, I've noticed that the divs tend to shift o ...

htmlcss

<ul> hover effect and text </ul>

Looking for a solution to activate hover state on both the box and text when rolling over tiled images with text underneath. Check out this example in the Fiddle: http://jsfiddle.net/techydude/GF8tS/ Any suggestions on how I can achieve this effect? ...

cssrollover

Spring load without CSS

Upon successful login, I am redirected to my main site using the following controller: //Login Success @GetMapping("/login-success") public ModelAndView loginSuccess() { return new ModelAndView("/cont/home.html"); } The URL for this redirection i ...

javahtmlcssspring

Ensuring an image fits perfectly within a div that spans 100% width using CSS

I'm brand new to CSS and could use some guidance Here's the issue: I have a 1600 pixel wide image and a div that is 100% wide. Is there a method to adjust the image so it fits within the div, eliminating any horizontal scroll bars and cutting o ...

htmlcssimagewidth

Is there a way to invoke a method within a hyperlink?

I have a method that needs to be called in a vue.js file: par() { this.jsontocsv++ } However, I am attempting to call it using a <li> tag, but I am unsure of how to do so. <li> <a v-on:click="par" href="#"> Example 1</a></ ...

htmlvue.js

Understanding the interpretation of various HTML wrapping containers (such as div) in ReactJS

Struggling to convert wrapping containers from HTML to ReactJS? Let me break it down for you with an example. Here's the HTML code: <body> <header> <div class="fixed-header"> ...content </div> <div cla ...

htmlreactjs

Eliminate the space both above and below the <a> element

I am facing a situation where a <div> is nested inside a table, occupying the entire space of its parent <td> Within this <div>, there lies a single <a> element My objective is to have these <a> elements expand to 100% width ...

htmlcss

On the application's user interface, the contact list from a mobile device

I have successfully integrated the Contacts native plugin from Ionic 3 into my app. While it is functioning properly, I am facing an issue with implementing it within the app's UI. Currently, the contact list loads outside the app and only returns to ...

cssangulartypescriptionic3cordova-plugins

How to efficiently center and adjust the size of a div-wrapper containing multiple responsive divs

I could use some assistance with this particular issue. What's been successful so far: I have a large div within my body (and also inside main, for css-related reasons), housing eight smaller divs divided into four columns. I've applied float:l ...

htmlcssresponsive-design

Utilizing checkboxes for results filtering in Angular

I'm having trouble implementing a filter with checkboxes. The checkboxes are being displayed correctly: <div data-ng-repeat="cust in customers"> <input type="checkbox" data-ng-model="search.city" data-ng-true-value="{{ cust.city }}" dat ...

javascripthtmlangularjscheckboxangular-filters

Establish a hyperlink using the jQuery class

Can you use JQuery to turn the text "Link" into a hyperlink in the following code? <p>Hello World! <span class="link">Link</span>.</p> ...

jqueryhtml

Ways to align content in the middle within a Bootstrap div without affecting the surrounding

My initial design consisted of cards with centered text aligned inline next to icons similar to this: However, I recently received a requirement to import Bootstrap into the project and revamp the entire layout. Unfortunately, upon importing Bootstrap, th ...

jqueryhtmlcssbootstrap-4

Bootstrap only allows for styling the border row and outside of a table

I'm looking to remove the vertical border of a table using bootstrap, except for the outside border as illustrated below. https://i.sstatic.net/RYq7o.png I've attempted to achieve this by: <table class="table no-footer worker-data tabl ...

htmlcssbootstrap-4

Is it possible to modify the page contents using the htaccess file?

Is there a way to manipulate the content of a page using the htaccess file? Perhaps something similar to a redirect, but instead of directing the user to a new page, it would alter the existing page's content? ...

html.htaccessurl