How to adapt div's width to content with flexbox

Answer 1

Try this code-example

.flexrow .card {
  height: 60px;
  background-color: red;
  margin: 10px;
  padding: 10px;
  text-align: center;
}

I removed the width, so that flexrow can adapt to the content. Is this what you wanted? If not please specify (maybe a picture?)

Answer 2

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;
}

<div class="fullwidth">
  <div class="sidebar">
    <p>sidebar</p>
    <p>sidebar</p>
    <p>sidebar</p>
    <p>sidebar</p>
    <p>sidebar</p>
    <p>sidebar</p>
  </div>
  <div class="center">
    <div class="flexrow">
      <div class="card">
        <p>card</p>
      </div>
      <div class="card">
        <p>card</p>
      </div>
      <div class="card">
        <p>card</p>
      </div>
      <div class="card">
        <p>card</p>
      </div>
      <div class="card">
        <p>card</p>
      </div>
      <div class="card">
        <p>card</p>
      </div>
    </div>
  </div>
</div>

Answer 3

The main problem here is that when an item wrap, whether one use Flexbox or not, its container won't adjust its width to the new content width.

With the existing markup, here is a simple fix in 2 steps to achieve that:

1. Add justify-content: center; to your .flexrow rule

2. For every possible column you need one less ghost element to push elements on the last row all the way to the left. The added elements together with new .flexrow .card:empty rule will do the magic.

   .flexrow .card:empty {
     height: 0;
     margin: 0 10px;
     padding: 0 10px;
   }
   

Updated codepen

Stack snippet

.fullwidth {
  background-color: grey;
  display: flex;
}

.sidebar {
  flex: 0 0 280px;
  margin: 10px;
  padding: 10px;
  background-color: black;
  color: white;
}

.flexrow {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
}

.flexrow .card {
  width: 300px;
  height: 60px;
  background-color: red;
  margin: 10px;
  padding: 10px;
  text-align: center;
}

.flexrow .card:empty {
  height: 0;
  margin: 0 10px;
  padding: 0 10px;
}

<div class="fullwidth">
  <div class="sidebar">
    <p>sidebar</p>
    <p>sidebar</p>
    <p>sidebar</p>
    <p>sidebar</p>
    <p>sidebar</p>
    <p>sidebar</p>
  </div>
  <div class="center">
    <div class="flexrow">
      <div class="card">
        <p>card</p>
      </div>
      <div class="card">
        <p>card</p>
      </div>
      <div class="card">
        <p>card</p>
      </div>
      <div class="card">
        <p>card</p>
      </div>
      <div class="card">
        <p>card</p>
      </div>
      <div class="card">
        <p>card</p>
      </div>
      <div class="card">
        <p>card</p>
      </div>

      <!-- Ghost elements, if max columns is 4 one need 3 -->
      <div class="card"></div>
      <div class="card"></div>
      <div class="card"></div>

    </div>
  </div>
</div>

Answer 4

UPDATE

Try this one:

 .flexrow {
  width: 90%;
  display: inline-flex;  
  flex-direction: row;
  flex-wrap: wrap;
  -webkit-align-content: center;
  align-content: center;
  -webkit-justify-content: space-between;
  justify-content: space-between;  
  margin: 0 auto;  
}
.flexrow:after {  
    content: "";  
    width: 300px;
    margin: 10px;
    padding: 10px;
    text-align: center;    
}

---

Hope that what you're looking for :)