3 Column Flex Layout - Middle Column Only As Width As It's Content

My fiddle so far: This post is a sequel to my previous post. Quest 1: I'd like the middle columns to be only as width as its content. The left and right column should then equal

Solution 1:

You can just add flex: 1 to left and right divs or in your case DEMO

.content {
  display: flex;
  height: 100vh;
}
.content > div {
  display: flex;
  align-items: center;
  justify-content: center;
}
.left,
.right {
  flex: 1;
  background: lightblue;
}
.middle {
  background: lightgreen;
}

<divclass="content"><divclass="left">Lorem</div><divclass="middle">Lorem ipsum dolor sit amet.</div><divclass="right">lorem</div></div>

Solution 2:

Do you mean something like this? You should do:

.some-area > div:nth-child(2) {
  background: #79b5d2;
  align-self: center;
}

If you want to change the width you should do:

.some-area > div:nth-child(2) {
      background: #79b5d2;
      flex: 0;
    }

Solution 3:

You can assign a fixed width and no shrink or grow to that element by adding (for example) flex: 0 0 150px; to its CSS.

.fill-height-or-more {
  min-height: 100%;
  display: flex;
}
.fill-height-or-more > div {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -moz-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items : center;
}

.some-area > div {
  padding: 1rem;
}
.some-area > div:nth-child(1) {
  background: #88cc66;
}
.some-area > div:nth-child(2) {
  background: #79b5d2;
  flex: 00150px;

}
.some-area > div:nth-child(3) {
  background: #8cbfd9;
}
.some-area > divh1, .some-area > divh2 {
  margin: 000.2rem0;
}
.some-area > divp {
  margin: 0;
}

html, body {
  height: 100%;
}

<sectionclass="some-area fill-height-or-more"><div><h1>LEFT</h1></div><div><h2>Two</h2><p>This Column should</p><p>only be as width as</p><p>its content.</p></div><div><h2>RIGHT</h2></div></section>

Solution 4:

You could play with the sizes of your 3 div's by doing for example so:

.some-area > div:nth-child(1) {
background: #88cc66;
flex: .4;
}

.some-area > div:nth-child(2) {
background: #79b5d2;
flex: .2;
align-self: center;

}
.some-area > div:nth-child(3) {
 background: #8cbfd9;
 flex: .4;
}

The left and right div would be twice as big, I'm not sure though if that is what you are trying to accomplish.