Css flex is not compatible with Safari, iPhone 5, and some mobile web browsers' webviews

All of the following code snippets are written in HTML:

<div class="btn-toolbar text-center" role="toolbar">
      <a href="#" class="btn btn-success">Link 1</a>
      <a href="#" class="btn btn-success">Link 11</a>
      <a href="#" class="btn btn-success">Link 111</a>
      <a href="#" class="btn btn-success">Link 1111</a>
      <a href="#" class="btn btn-success">Link 11111</a>
      <a href="#" class="btn btn-success">Link 111111</a>
      <a href="#" class="btn btn-success">Link 11111</a>
      <a href="#" class="btn btn-success">Link 1111</a>
      <a href="#" class="btn btn-success">Link 111</a>
      <a href="#" class="btn btn-success">Link 111</a>
      <a href="#" class="btn btn-success">Link 11</a>
      <a href="#" class="btn btn-success">Link 111</a>
      <a href="#" class="btn btn-success">Link 1111111</a>
      <a href="#" class="btn btn-success">Link 111111111</a>
      <a href="#" class="btn btn-success">Link 111</a>
      <a href="#" class="btn btn-success">Link 11111</a>
      <a href="#" class="btn btn-success">Link 11</a>
      <a href="#" class="btn btn-success">Link 11111111111</a>
      <a href="#" class="btn btn-success">Link 11111</a>
      <a href="#" class="btn btn-success">Link 1</a>
    </div>

The following styles are written in CSS:

.btn-toolbar{
    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;
}
.btn-toolbar .btn{
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

The use of flex Css may not be supported in Safari, iPhone 5, IOS 6, and mobile Browser Webviews. Although I have tried implementing browser support, it is still not functioning properly. Any suggestions or solutions would be greatly appreciated as I prefer to avoid using fixed width properties.

ioscsswebviewsafariflexbox

Answer №1

.button-group{
    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;
}
.button-group .btn{
  -webkit-box-flex-grow: 1;
  -moz-box-flex-grow: 1;
  -webkit-flex-grow: 1;
      -ms-flex-grow: 1;
          flex-grow: 1;
}

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

What are the ways to incorporate the width property in @media queries within CSS?

I've been struggling to set the width inside @media in my code, but it's not working as expected. Here is what I have tried: mat-toolbar { app-toolbar-left { width: 35%; } app-toolbar-right { width: 22%; } } @me ...

cssresponsive-designmedia-queries

Unable to scroll within a div while utilizing Tailwind CSS framework

Setting up this middle div on a page presents the following situation: The Top Bar should remain sticky and stationary The Middle section should scroll as new content is added or if the user scrolls up or down The Bottom Bar sh ...

csstailwind-css

Using HTML and CSS to create a flexbox layout with multiple rows

.ent__food__image { display: flex; justify-content: end; } .bev__food__image { display: flex; justify-content: end; } .kids__food__image { display: flex; justify-content: end; } <main class="flex-container"> <!-- Entrees --> & ...

htmlcssflexbox

Pattern ARC for initializing property patterns

Upon first reading Beginning iOS 3 Development before ARC, I distinctly recall coming across patterns similar to this in certain ViewController classes: .h @property (nonatomic, retain) NSArray *myArray; .m in viewDidLoad: NSArray *tempArray = [[NSArray ...

iosautomatic-ref-counting

Adjust the HTML 5 range slider to update according to the selected value

Is it possible to create a custom marker on an HTML5 range input element? I'm looking for a way to change the design of the circle marker as it moves along the scale from 1 to 10. Specifically, I want to change the color of the marker based on its po ...

javascriptjqueryhtmlcssrange

Choosing a color while hovering over the navigation bar

I'm trying to modify the color of my navigation bar when hovering over it with the mouse. Currently, it's black but I want it to change to a light grey or white color. What am I missing here? HTML: <!DOCTYPE html> <html> <head ...

htmlcsstwitter-bootstrapcolors

implement an angular directive to apply a CSS element

I am utilizing AngularJS and ng-repeat to populate a dynamic list of studies. This list has the capability to toggle into child elements of each item, creating an accordion-style toggle list that can go up to three levels deep for each list item. I am curr ...

javascriptjqueryhtmlcssangularjs

Creating visually appealing website designs with Firefox by implementing smooth background image transitions using Javascript with

Currently, I am facing an issue with the banner area on my website. The background of the banner is set to change every 10 seconds using JavaScript. However, there seems to be a flickering effect that occurs for a brief moment when the background-image is ...

javascripthtmlcssbackground-image

Removing classes from multiple cached selectors can be achieved by using the .removeClass

Currently working on enhancing some JavaScript/jQuery code by storing selectors in variables when they are used more than once to improve performance, for example: var element = $("#element"); element.hide(); However, I am facing difficulties while tryin ...

javascriptjqueryhtmlcsscaching

What is the best way to showcase several divs, along with their respective child elements, in an inline format?

I am struggling to get 4 div sections to display side by side by using the following CSS for the parent div: .parent { display: inline; } <div class="parent"> <div class="child"> <ul> <li>t ...

htmlcss

The CSS files are not loading automatically in my React application using Vite

I am facing an issue with importing css and js files into a view in React using vite. The styles are not loading properly, and I have to keep commenting and uncommenting the imports in my code for them to be recognized when entering the view. Below is a s ...

javascriptcssreactjstypescript

What are some ways I can efficiently load large background images on my website, either through lazy loading or pre

Just dipping my toes into the world of javascript. I'm currently tackling the challenge of lazy loading some large background images on my website. My goal is to have a "loading" gif displayed while the image is being loaded, similar to how it works ...

javascriptjquerycssbackground-imagelazy-loading

Struggling to determine the proper method for establishing initial values within a UIPickerView

I am currently working with a UIPickerView and my goal is to have the section remain the same as the last time it was used. I reviewed Apple's documentation on this matter but did not come across any information regarding setting the sections. Here i ...

ios

Tips for adding tags to your photos for Instagram sharing

I want to share a photo on Instagram and some apps automatically insert tags into the photo. How can I achieve this? - (void)shareOnInstagramWithImage:(UIView*)view displayedInView:(UIViewController*)viewController { UIView* captureView = ...

iosiphoneobjective-cinstagram

Ensure that each of the two divs maintains a 16:9 aspect ratio, and utilize one div to fill any remaining empty space through the

This layout is what I am aiming for: https://i.sstatic.net/uZdty.png While I can achieve a fixed aspect ratio with a 16:9 image by setting the img width to 100%, I run into an issue where the height scaling of flexbox becomes non-responsive. The height re ...

javascripthtmlcssflexbox

Creating a radio button along with a submit button that redirects to a different local HTML file

Can someone please help with this code? I'm trying to redirect to the value of each radio button when it's clicked. Any guidance or JavaScript code would be greatly appreciated. Thank you. I've tried multiple solutions but none of them seem ...

javascripthtmlcssradio-button

Tips for achieving consistent text and image alignment through CSS styling

My table currently contains a default profile image. Initially, there might not be any text content and I have set up the CSS styling to allow text to wrap around the default image. I am facing an issue when trying to position the image statically in a wa ...

htmlcsspositioning

Creating a table with a tableHead cell comprised of multiple components in ReactJS/CSS using Material UI

It's possible that the title lacks description. I am attempting to generate a table with a specific layout like this https://i.sstatic.net/T97C2.gif Essentially, the "Average" cell is combined with two smaller cells for "height" and "width," which c ...

htmlcssreactjsmaterial-ui

Ways to refresh a tableView following asynchronous JSON fetching in Objective C

Here is the code I'm using for asynchronous fetching of JSON data: -(void)viewDidAppear:(BOOL)animated { [_indicator startAnimating]; _indicator.hidesWhenStopped = YES; dispatch_queue_t queue = dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAU ...

iosobjective-cjsonuitableview

Enable highlighting a table border when hovering over it

Is there a way to highlight the boundary of a table row when hovering over it? Something like this: I attempted to use CSS with the following code: .ant-table-tbody>tr.ant-table-row:hover>td, .ant-table-tbody>tr>td.ant-table-cell-row-hover{ ...

cssreactjsbootstrap-4material-ui