How shrink-wrap a div with flexbox?

Question

What's the best way to shrink-wrap a div using flex-box? In the snippet below, I have a wrapper (the green border) shrink-wrapping the content (red & blue boxes) on all sides but the bottom.

How can I get this accomplished?

Here's a plunker demo: https://plnkr.co/edit/u89JPIbZObTYIfRejlO1?p=preview

.red {
  width: 100px;
  height: 50px;
  background-color: red;
}

.blue {
  width: 100px;
  height: 50px;
  background-color: blue;
}

.container2 {
  width: 400px;
  height: 300px;
  border: solid;
  display: flex;
  justify-content: center;
}

.wrapper2 {
  border: solid green;
  padding: 5px;
}

<div class="container2">
  <div class="wrapper2">
    <div class="red">x</div>
    <div class="blue">x</div>
  </div>
</div>

score 1 · Accepted Answer · answered Jul 22 '17 at 23:07

you can use :

align-items

.container2 {
  width: 400px;
  height: 300px;
  border: solid;
  display: flex;
  justify-content: center;
  align-items:flex-start;/* update here */
}

.red {
  width: 100px;
  height: 50px;
  background-color: red;
}

.blue {
  width: 100px;
  height: 50px;
  background-color: blue;
}

.container2 {
  width: 400px;
  height: 300px;
  border: solid;
  display: flex;
  justify-content: center;
  align-items:flex-start;
}

.wrapper2 {
  border: solid green;
  padding: 5px;
  /*margin:0 auto auto*/
}

<div class="container2">
  <div class="wrapper2">
    <div class="red">x</div>
    <div class="blue">x</div>
  </div>
</div>

or margin

.wrapper2 {
  border: solid green;
  padding: 5px;
  margin:0 auto auto/* update here */
}

.red {
  width: 100px;
  height: 50px;
  background-color: red;
}

.blue {
  width: 100px;
  height: 50px;
  background-color: blue;
}

.container2 {
  width: 400px;
  height: 300px;
  border: solid;
  display: flex;
  justify-content: center;
 /* align-items:flex-start;*/
}

.wrapper2 {
  border: solid green;
  padding: 5px;
  margin:0 auto auto
}

<div class="container2">
  <div class="wrapper2">
    <div class="red">x</div>
    <div class="blue">x</div>
  </div>
</div>

a reminder/titorial: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

score 1 · Answer 2 · answered Jul 22 '17 at 23:08

Use the align-items: flex-start; property on .container2

.red {
  width: 100px;
  height: 50px;
  background-color: red;
}

.blue {
  width: 100px;
  height: 50px;
  background-color: blue;
}

.container2 {
  width: 400px;
  height: 300px;
  border: solid;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.wrapper2 {
  border: solid green;
  padding: 5px;
}

<div class="container2">
  <div class="wrapper2">
    <div class="red">x</div>
    <div class="blue">x</div>
  </div>
</div>

How shrink-wrap a div with flexbox?

2 Answers2