CODEWITHSUNDEEP
cssflexbox
user13473845
user13473845

Reputation:

flexbox width 100% does not cover whole the page width

I have the following CSS:

.turbineContainer{
        width: 50%;
        flex-wrap: wrap;
        display: flex;
        
      }
      .turbineIcons{               
          background-color:white;           
          margin: 1em;
          height: 50px;
          width: 100px;
      }

      .container {
        display: flex;
       width: 100%;
      }
              
      .left-half {
        flex-wrap: wrap;
        display: flex;
        background-color: #f7941d;
        flex: 1;
      }
      
      .right-half {
        background-color: #8d5022;
        flex: 1;
      }

here is my Html:

    <div class="container">
          <div class="left-half">
          <mat-card  class="turbineIcons"></mat-card>
          <mat-card  class="turbineIcons"></mat-card>
          <mat-card  class="turbineIcons"></mat-card>
          <mat-card  class="turbineIcons"></mat-card>
          <mat-card  class="turbineIcons"></mat-card>
          <mat-card  class="turbineIcons"></mat-card>
          <mat-card  class="turbineIcons"></mat-card>
          <mat-card  class="turbineIcons"></mat-card>
          <mat-card  class="turbineIcons"></mat-card>
          <mat-card  class="turbineIcons"></mat-card>
          <mat-card  class="turbineIcons"></mat-card>
          <mat-card  class="turbineIcons"></mat-card>
          <mat-card  class="turbineIcons"></mat-card>
          <mat-card  class="turbineIcons"></mat-card>
          <mat-card  class="turbineIcons"></mat-card>       
        </div> 
        <div class="right-half">
          here is the Right Panel             
          </div>
        </div>

I divided the page into two parts,left side and right side,i put the width 100% to cover whole the page width,but what is see is these two parts placed in the middle of the page,i have inclided a screenshot of what i get The ScreenShot

Upvotes: 2

Views: 4963

Answers (2)

Yogendra Chauhan
Yogendra Chauhan

Reputation: 825

Here is the working example:

.container {
    display: flex;
}

.container .left-half .turbineIcons{               
    background-color:white;           
    flex: 1;
    margin: 1em;
    min-width: 25%;
    height: 50px;
}
                  
.container .left-half {
    flex-wrap: wrap;
    display: flex;
    background-color: #f7941d;
    flex: 1;
}
          
.container .right-half {
    background-color: #8d5022;
    flex: 1;
}
<div class="container">
    <div class="left-half">
        <mat-card  class="turbineIcons"></mat-card>
        <mat-card  class="turbineIcons"></mat-card>
        <mat-card  class="turbineIcons"></mat-card>
        <mat-card  class="turbineIcons"></mat-card>
        <mat-card  class="turbineIcons"></mat-card>
        <mat-card  class="turbineIcons"></mat-card>
        <mat-card  class="turbineIcons"></mat-card>
        <mat-card  class="turbineIcons"></mat-card>
        <mat-card  class="turbineIcons"></mat-card>
        <mat-card  class="turbineIcons"></mat-card>
        <mat-card  class="turbineIcons"></mat-card>
        <mat-card  class="turbineIcons"></mat-card>
        <mat-card  class="turbineIcons"></mat-card>
        <mat-card  class="turbineIcons"></mat-card>
        <mat-card  class="turbineIcons"></mat-card>       
    </div>
    <div class="right-half">here is the Right Panel</div></div>

Upvotes: 1

Pixelomo
Pixelomo

Reputation: 6737

Judging by the class .container you're using bootstrap right? it has a max-width which is why it isn't 100% width.

Containers are the most basic layout element in Bootstrap and are required when using our default grid system. Choose from a responsive, fixed-width container (meaning its max-width changes at each breakpoint) or fluid-width (meaning it’s 100% wide all the time).

Use .container-fluid for a full width container, spanning the entire width of the viewport.

https://getbootstrap.com/docs/4.0/layout/overview/

Upvotes: 1

Related Questions