flex element keeping a row as auto width ( shrink with content ) is possible?

Question

.container{
  border:1px solid red;
  display:inline-flex;
  flex-wrap: wrap;
  flex-direction: column;
  min-width: 300px;
}

.first{
  flex-basis: 100%;
  background-color: green;
  color:white;
}

.second{
  background-color: gray;
  color: yellow;
  flex-basis: auto;
}

 <div class="container">
  <div class="first">full width</div>
  <div class="second">
  inline-block
  </div>

I do not want to "second" div occupied with 100%. i want to keep it as like "inline-block" the width should extended until the content available. is it possible to do with flex?

thanks in advance

width: fit-content; for .second – s.kuznetsov Nov 11 '20 at 08:43 — s.kuznetsov, Nov 11 '20 at 08:43

score 1 · Accepted Answer · answered Nov 11 '20 at 08:00

1

Use align-self to limit flex-items within flexbox.

.container{
  border:1px solid red;
  display:inline-flex;
  flex-wrap: wrap;
  flex-direction: column;
  min-width: 300px;
}

.first{
  flex-basis: 100%;
  background-color: green;
  color:white;
}

.second{
  background-color: gray;
  color: yellow;
  align-self: start;
}

<div class="container">
  <div class="first">full width</div>
  <div class="second">
    inline-block
  </div>
</div>

answered Nov 11 '20 at 08:00

Dhruvi Makvana

895
5
17

if you want to shrink the border as well in that case remove a border from parent and add `.container * { border:1px solid red; }` – Dhruvi Makvana Nov 11 '20 at 08:02

score 1 · Answer 2 · answered Nov 11 '20 at 08:47

Add margin-right: auto to .second class.

.container{
  border:1px solid red;
  display:inline-flex;
  flex-wrap: wrap;
  flex-direction: column;
  min-width: 300px;
}

.first{
  flex-basis: 100%;
  background-color: green;
  color:white;
}

.second{
  background-color: gray;
  color: yellow;
  flex-basis: auto;
  margin-right: auto;
}

<div class="container">
  <div class="first">full width</div>
  <div class="second">
  inline-block
  </div>

flex element keeping a row as auto width ( shrink with content ) is possible?

2 Answers2