Flexbox equal column height set dominant column height?

Question

I have made this example:

.example {
  max-width: 600px;
}

.flex-row {
  display: flex;
  flex-wrap: wrap;
}

.flex-row .col {
  flex-grow: 1;
  flex-basis: 0;
}

.flex-row .content {
  flex: 0 0 60%;
  padding: 15px;
  background: #b7bdbb;
}

.image {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.image img {
  flex-shrink: 0;
  min-width: 100%;
  min-height: 100%;
}

<div class="example">
  <div class="flex-row">
    <div class="col image">
      <img src="https://via.placeholder.com/500x265" alt="">
    </div>

    <div class="col content">
      some content
    </div>
  </div>
</div>

I want my image on the left to be cropped but I want my content to dictate the overal height of the .example element.

Currently the image is dictating the overal height of the entire element. I want to image to be cropped to the size of the content that is in the right column. Is it do-able with my example?

Related - https://stackoverflow.com/questions/34194042/one-flex-item-sets-the-height-limit-for-siblings — Paulie_D, Dec 19 '17 at 13:10
I still need to test the browser support for IE with my current solution. But you said: `This overcome 2 bugs in IE, where one can't use calc in shorthand flex and the border-box issue to have padding inlcuded in the set width`, but I do not have any need for `calc` with my current solution so I am wondering if you are hinting at some other bugs perhaps? — Stephan-v, Dec 20 '17 at 10:03
No, the `calc` I used to reduce the padding from the width, or else the width is 60% + padding. If that is fine then no need to use it, if not, then that is the workaround for `box-sizing: border-box`, which is the 2nd bug I meant. The other option is to drop padding on the flex item and use a margin on its child. — Asons, Dec 20 '17 at 10:15
May I ask why you keep an answer that doesn't work cross browsers the accepted one, when there is one's that does? — Asons, Jan 23 '18 at 15:04

Kushtrim · Accepted Answer · 2017-12-19T13:24:44.650

2

If I understand you correctly you want your right column to set the overall height of #example

.example {
  max-width: 600px;
}

.flex-row {
  display: flex;
  flex-wrap: wrap;
}

.flex-row .col {
  flex-grow: 1;
  flex-basis: 0;
}

.flex-row .content {
  flex: 0 0 60%;
  padding: 15px;
  background: #b7bdbb;
}

.image {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  position: relative;
}

.image img {
  flex-shrink: 0;
  min-width: 100%;
  max-width: 100%;
  position: absolute;
}

<div class="example">
  <div class="flex-row">
    <div class="col image">
      <img src="https://via.placeholder.com/500x265" alt="">
    </div>

    <div class="col content">
      some content
    </div>
  </div>
</div>

edited Dec 19 '17 at 13:24

answered Dec 19 '17 at 13:13

Kushtrim

1,899
6
14

This stretches the image. – Stephan-v Dec 19 '17 at 13:22
@Stephan-v should the image be at center? I've updated the fiddle. – Kushtrim Dec 19 '17 at 13:25
@Stephan-v Do note, this does not work cross browsers – Asons Dec 19 '17 at 15:40
@LGSon for which browsers would this not work and why exactly? When using flexbox I do not care about browsers that do not support flexbox to begin with. If there are other concerns besides that, please let me know. Thanks. – Stephan-v Dec 19 '17 at 16:17
@Stephan-v I don't talk about browsers that does not support Flexbox. If you test this solution you find that it won't work properly in Firefox, IE11 and Safari 10.x, where they generally have issues with absolute positioned flex items. I have posted an answer with the best solution when it comes to browser support. – Asons Dec 19 '17 at 16:22

Nenad Vracar · Answer 2 · 2017-12-19T13:11:19.757

1

You can use position: relative on parent element and position: absolute on image and set height: 100%

.example {
  max-width: 600px;
}
.flex-row {
  display: flex;
  flex-wrap: wrap;
}
.flex-row .content {
  flex: 0 0 60%;
  padding: 15px;
  background: #b7bdbb;
}
.image {
  flex: 1;
  position: relative;
}
.image img {
  height: 100%;
  position: absolute;
  vertical-align: top;
}

<div class="example">
  <div class="flex-row">
    <div class="col image"><img src="https://via.placeholder.com/500x265" alt=""></div>
    <div class="col content">some content</div>
  </div>
</div>

edited Dec 19 '17 at 13:11

answered Dec 19 '17 at 13:00

Nenad Vracar

118,580
15
151
176

I can't use object-fit because it has terrible browser support: https://caniuse.com/#search=object-fit – Stephan-v Dec 19 '17 at 13:02
The height is still way longer than the content that is within the right column. – Stephan-v Dec 19 '17 at 13:04
This does not cover the left column. – Stephan-v Dec 19 '17 at 13:29
You can add `width: 100%` also – Nenad Vracar Dec 19 '17 at 13:30

Asons · Answer 3 · 2017-12-20T10:37:08.707

I want my image on the left to be cropped but I want my content to dictate the overal height of the .example element.

When using an img, what first comes to mind is object-fit, though since it has not the best browser support, here is one that has, making use of background-image.

Generally, when using background-image, one set the image source in the external CSS, though sometimes one want to set it in the markup, like one does when using an img.

An often overlooked possibility when this is needed, is to simply use the style attribute, which is no more complicated than the src attribute on the img, where one can set the source in markup like this: style="background-image: url(...)"

I also used flex-basis: calc(60% - 30px). This overcome 2 bugs in IE, where one can't use calc in shorthand flex and the border-box issue to have padding inlcuded in the set width.

Stack snippet

.example {
  max-width: 600px;
}

.flex-row {
  display: flex;
  flex-wrap: wrap;
}

.flex-row .image {
  flex-grow: 1;
  background-position: center;
  background-size: cover;
}

.flex-row .content {
  flex-basis: calc(60% - 30px);
  padding: 15px;
  background: #b7bdbb;
}

<div class="example">
  <div class="flex-row">
    <div class="col image" style="background-image: url(https://via.placeholder.com/500x265)">
    </div>

    <div class="col content">
      some content
    </div>
  </div>
</div>

If you still need (or have to) use an img, here is one sample that work cross browsers.

Since several browsers, i.a. Safari (appears to be fixed from v. 11 though) and IE, have issues with Flexbox and absolute positioned flex items, I here make use of transform: translate to provide a solution to center the image.

Stack snippet

.example {
  max-width: 600px;
}

.flex-row {
  display: flex;
  flex-wrap: wrap;
}

.flex-row .image {
  flex-grow: 1;
  position: relative;
  overflow: hidden;
}

.flex-row .image img {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  transform: translateY(-50%);
}

.flex-row .content {
  flex-basis: calc(60% - 30px);
  padding: 15px;
  background: #b7bdbb;
}

<div class="example">
  <div class="flex-row">
    <div class="col image">
      <img src="https://via.placeholder.com/500x265)" alt="">
    </div>

    <div class="col content">
      some content
    </div>
  </div>
</div>

score 0 · Answer 4 · answered Dec 19 '17 at 13:01

You can achieve this using backgound-image property

.example {
  max-width: 600px;
}

.flex-row {
  display: flex;
  flex-wrap: wrap;
}

.flex-row .col {
  flex-grow: 1;
  flex-basis: 0;
}

.flex-row .content {
  flex: 0 0 60%;
  padding: 15px;
  background: #b7bdbb;
}

.image {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background-image:url('https://via.placeholder.com/500x265');
  background-size:cover;
  background-position:50% 50%;
}

.image img {
  flex-shrink: 0;
  min-width: 100%;
  min-height: 100%;
}

<div class="example">
  <div class="flex-row">
    <div class="col image">
    </div>

    <div class="col content">
      some content
    </div>
  </div>
</div>

My url is not directly accessible. So I need to compose it within Javascript and set the style on the element through Javascript. If this can be done another way I would prefer it for performance reasons and to simplify my code. — Stephan-v, Dec 19 '17 at 13:03

Flexbox equal column height set dominant column height?

4 Answers4

Linked