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

<div class="content">
  <div class="left">Lorem</div>
  <div class="middle">Lorem ipsum dolor sit amet.</div>
  <div class="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: 0 0 150px;

}
.some-area > div:nth-child(3) {
  background: #8cbfd9;
}
.some-area > div h1, .some-area > div h2 {
  margin: 0 0 0.2rem 0;
}
.some-area > div p {
  margin: 0;
}

html, body {
  height: 100%;
}

<section class="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.