Primer CSS Flexbox Bugs

Last Updated : 29 Aug, 2022

Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other.

Flexbox is the flexible box that will change this size according to the resolution of the screen.

Flexbox bug is when you perform some task and the output is keep changing when you switch the browser. For example, if you are running the code on chrome then it is giving output not the same as when you run the same code on safari.

We will now discuss two major bugs when we use flexbox.

Minimum content sizing of flex items not honored: This signifies that when you run the code with any of the flex classes then the output is keep changing when you change the browser. Instead of changing the size of the item, they change the content of the item.
Some elements can’t be flex containers: This signifies that when you change the browser then the block can’t flex according to the resolution. Suppose you have made 12 flex item box in a row and when you change the resolution then the block don’t flex and 12 blocks in small resolution will look bad.

Example 1:

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> Primer CSS Flexbox Flex </title> 
    <link rel="stylesheet" href= 
          "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> 
</head> 
  
<body> 
    <h1 class="color-fg-success text-center"> 
        GeeksforGeeks 
    </h1> 
    <h4 class="text-center font-bold"> 
        Primer CSS Flexbox 
    </h4> 
  
    <strong>Flexbox row</strong> 
    <br> 
    <div class="border d-flex flex-column flex-sm-row"> 
        <div class="p-5 border color-bg-subtle">Item 1</div> 
        <div class="p-5 border color-bg-subtle">Item 2</div> 
        <div class="p-5 border color-bg-subtle">Item 3</div> 
        <div class="p-5 border color-bg-subtle">Item 4</div> 
        <div class="p-5 border color-bg-subtle">Item 5</div> 
    </div> 
</body> 
  
</html>

Output:

When you run the above code in safari:

When you run the same code on chrome:

Example 2:

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> Primer CSS Flexbox Flex </title> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> 
</head> 
  
<body> 
    <h1 class="color-fg-success text-center"> 
        GeeksforGeeks 
    </h1> 
    <h4 class="text-center font-bold"> 
        Primer CSS Flexbox 
    </h4> 
  
    <strong>Flexbox row</strong> 
    <br> 
    <div class="border d-flex flex-column flex-sm-row"> 
        <div class="p-5 border color-bg-subtle"> 
            An interview-centric course designed to prepare you  
            for the role of SDE for both product and service based 
            companies. A placement preparation pack built with years  
            of expertise.Prepare C++, Java, DSA, CS Theory concepts 
            and much more! 
        </div> 
        <div class="p-5 border color-bg-subtle"> 
            An interview-centric course designed to prepare you  
            for the role of SDE for both product and service based 
            companies. A placement preparation pack built with years  
            of expertise.Prepare C++, Java, DSA, CS Theory concepts 
            and much more! 
       </div> 
        <div class="p-5 border color-bg-subtle"> 
            An interview-centric course designed to prepare you  
            for the role of SDE for both product and service based 
            companies. A placement preparation pack built with years  
            of expertise.Prepare C++, Java, DSA, CS Theory concepts 
            and much more! 
      </div> 
        <div class="p-5 border color-bg-subtle"> 
            An interview-centric course designed to prepare you  
            for the role of SDE for both product and service based 
            companies. A placement preparation pack built with years  
            of expertise.Prepare C++, Java, DSA, CS Theory concepts 
            and much more! 
       </div> 
        <div class="p-5 border color-bg-subtle"> 
            An interview-centric course designed to prepare you  
            for the role of SDE for both product and service based 
            companies. A placement preparation pack built with years  
            of expertise.Prepare C++, Java, DSA, CS Theory concepts 
            and much more! 
      </div> 
    </div> 
  
</body> 
  
</html>