How to adapt div's width to content with flexbox

Answer 1

I guess what you want is that if you want the sidebar and the content to be side by side you need to use flex on the fullwidth div, check the code below:

.sidebar {
  background: black;
  color: white;
}

.fullwidth {
  display: flex;
}

.center {
  display: flex;
  justify-content: center;
  align-items:center;
  width:100%;
}

.flexrow {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: wrap;
  width:100%;
}

.flexrow .card {
  width: calc(33.33% - 20px);
  box-sizing:border-box;
  height: 60px;
  background-color: red;
  margin: 10px;
  padding: 10px;
  text-align: center;
}

  

    
sidebar
    
sidebar
    
sidebar
    
sidebar
    
sidebar
    
sidebar
  
  

    

      

        
card
      
      

        
card
      
      

        
card
      
      

        
card
      
      

        
card
      
      

        
card