James Mitchell James Mitchell - 1 year ago 114
CSS Question

Flexbox have max-width and max-height content and still be responsive

I have a flexbox with 4 columns, and an image in the first one.

JSFiddle

I want it so the image is responsive (which works), but I'd like it once the screen gets bigger and it's no longer shrinking/expanding, to have a max-width in pixels, instead of a percentage.

I used

max-width: 100%;
to make it responsive, but once the screen get's big enough where it's not shrinking or expanding, I'd like it to have a
max-width: 250px;
, so it doesn't continue to grow.

If I get rid of the
100%
and change it to
250px
, it's no longer responsive when the screen gets small.

I don't want to do a media query because I want it to work for an image.

Is there anyway to do this?

HTML

<div class="container">
<div class="row">
<div class="col">
<img src="https://s-media-cache-ak0.pinimg.com/236x/9d/db/c7/9ddbc7c118bcd047a06b44bae34bb413--exotic-flowers-tropical-flowers.jpg" />
</div>
<div class="col">
This is a group of flex columns
</div>
<div class="col">
Isn't that interesting?
</div>
</div>
</div>


CSS

.container {
display: block;
background-color: #fff;
padding-left: 30px;
padding-right: 30px;
}

.row {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row nowrap;
flex-flow: row nowrap;
margin-left: -30px;
margin-right: -30px;
padding: 15px 0 60px;
}

.col {
border: 1px solid black;
padding-left:30px;
padding-right:30px;
min-width: 0;
}

.col img {
width: auto;
max-width:100%;
// max-width: 250px; // This breaks it, but is what I need
max-height: 250px;
}

Answer Source

One solution is to set the max-width: 250px to your first .col

Fiddle demo

Stack snippet

.container {
  display: block;
  background-color: #fff;
  padding-left: 30px;
  padding-right: 30px;
}

.row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row nowrap;
          flex-flow: row nowrap;
  margin-left: -30px;
  margin-right: -30px;
  padding: 15px 0 60px;
}

.col {
  border: 1px solid black;
  padding-left:30px;
  padding-right:30px;
  min-width: 0;
}

.col img {
  max-width: 100%;
  max-height: 250px;
}

.col:first-child {
  max-width: 250px;
}
<div class="container">
  <div class="row">
    <div class="col">
      <img src="https://s-media-cache-ak0.pinimg.com/236x/9d/db/c7/9ddbc7c118bcd047a06b44bae34bb413--exotic-flowers-tropical-flowers.jpg" />
    </div>
    <div class="col">
      This is a group of flex columns
    </div>
    <div class="col">
      Isn't that interesting?
    </div>
  </div>
</div>


Another option is to wrap the img in a span and give the span the max-width: 250px

Fiddle demo

Stack snippet

.container {
  display: block;
  background-color: #fff;
  padding-left: 30px;
  padding-right: 30px;
}
.row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row nowrap;
          flex-flow: row nowrap;
  margin-left: -30px;
  margin-right: -30px;
  padding: 15px 0 60px;
}
.col {
  border: 1px solid black;
  padding-left:30px;
  padding-right:30px;
  min-width: 0;
}
.col img { 
  max-width: 100%;
  max-height: 250px;
}
.col span { 
  max-width: 250px;
}
<div class="container">
  <div class="row">
    <div class="col">
      <span>
        <img src="https://s-media-cache-ak0.pinimg.com/236x/9d/db/c7/9ddbc7c118bcd047a06b44bae34bb413--exotic-flowers-tropical-flowers.jpg" />
      </span>
    </div>
    <div class="col">
      This is a group of flex columns
    </div>
    <div class="col">
      Isn't that interesting?
    </div>
  </div>
</div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download