CODEWITHSUNDEEP
htmlcssflexbox
SaroVin
SaroVin

Reputation: 1773

How to adapt div's width to content with flexbox

I want adapt the .flexrow div's width to content but i can't set it with flex.

HTML

<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>
  </div>
</div>

CSS

.center {
  display: flex;
  justify-content: center;
}

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

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

I have created a snippet here

This is an example of what i want: example

Any suggestion?

Upvotes: 0

Views: 988

Answers (4)

Asons
Asons

Reputation: 87191

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>

Upvotes: 1

Mihai T
Mihai T

Reputation: 17687

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>

Upvotes: 0

Tsurule Vol
Tsurule Vol

Reputation: 482

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 :)

Upvotes: 0

Locke Lamora
Locke Lamora

Reputation: 63

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?)

Upvotes: 0

Related Questions