The min-width and max-width declaration for Flexbox doesn’t work on Safari? Why?

HTML Web Development Front End Technology

To make the Flexbox work on all the web browsers, use the min-width and max-width equivalents of flex. For example, for this −

min-width: 40%;
max-width: 40%;

Use the CSS Shorthand Property. It states flex-grow | flex-shrink | flex-basis as shown in the below syntax −

flex: flex-grow flex-shrink flex-basis|auto;

For the above, we can set the Flex as −

flex: 0 0 40%;

Let us now see a Flexbox example that works on all the web browsers. We have two divs inside our parent div parentBox −

<div class='parentBox'>
   <div class='childBox'>
      <div class='babyChildBox'>Parent's Child</div>
      <div class='babyChildBox'>Parent's Child</div>
   </div>
   <! - - -
   !-->
</div>

The style for the parent container. We have use the CSS Flex shorthand property −

.parentBox {
   display: flex;
   flex: 1 0 100%;
   background-color:yellow;
   border: 3px solid skyblue;
}

For the Child i.e. childBox, we have again used the shorthand property to set the flexible length on flexible items −

.childBox {
   flex: 1 1 50%
   background-color: green;
   color: white;
   border: 1px solid blue;
}

The nested child in the above .childBox is set with Flex. This and the above nests the flex containers −

.babyChildBox {
   flex: 1 1 50%;
   background-color: orange;
}

Example

Here’s the complete example −

<!DOCTYPE html>
<html>
<head>
   <style> 
      .parentBox {
         display: flex;
         flex: 1 0 100%;
         background-color:yellow;
         border: 3px solid skyblue;
      }
      .childBox {
         flex: 1 1 50%
         background-color: green;
         color: white;
         border: 1px solid blue;
      }
      .babyChildBox {
         flex: 1 1 50%;
         background-color: orange;
      }
   </style>
</head>
<body>
<h1>Implementing Flex</h1>
<div class='parentBox'>
   <div class='childBox'>
      <div class='babyChildBox'>Parent's Child</div>
      <div class='babyChildBox'>Parent's Child</div>
   </div>
   <div class='childBox'>
      <div class='babyChildBox'>Parent's Child</div>
      <div class='babyChildBox'>Parent's Child</div>
   </div>
</div>
</body>
</html>