flex items stretching on wider screens

Question

I just finished developing my first web page using flexbox. It looks great on my screen resolution (1326x768) but when I test it on a larger screen (1894x787), the content looks crazy stretched. Below are the screen shots:

At 1326x768

At higher screen resolution

Codepen

I had used flex: 1 1 60% on some elements (the % varies of course), but making flex-grow: 0 doesn't really do anything.

I have only set fixed parameters for the containers of images (fixed heights). I haven't set fixed widths for any container.

Am I missing something with flex boxes here?

I guess media queries might be one way to solve this problem but is there any other solution, a more robust way to develop using flex?

How can I make the page look the way it is meant to in all screen sizes not stretched or overly compressed?

html,
body {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}
body {
  display: flex;
  flex-direction: column;
}
* {
  box-sizing: border-box;
}
p {
  margin: 0;
  padding: 0;
}
a {
  text-decoration: none;
}
.margin-end {
  margin-bottom: 40px;
}
.margin-start {
  margin-top: 10px;
}
header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  color: #6e6e6e;
  font-family: AvenirLTStd-Roman;
  font-weight: bolder;
  font-size: 1rem;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.11);
  /*box-shadow: 0px 10px 5px -9px rgba(0,0,0,0.75);*/
  /*border-bottom: solid 1px #ececec;*/
}
.banner-heading {
  margin-left: 350px;
  font-weight: bolder;
  font-size: 1.875rem;
}
.secondary-heading {
  /* border: solid;
*/
  display: flex;
  flex-direction: row;
  margin-right: 60px;
  font-size: 0.8rem;
  justify-content: center;
  position: relative;
  /* margin: auto;
*/
}
.secondary-heading-1 {
  padding-right: 60px;
  /* vertical centering */
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  font-weight: lighter;
}
.secondary-heading-2 {
  /* vertical centering */
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  color: #6e6e6e;
  font-weight: lighter;
}
.secondary-heading-1 a,
.secondary-heading-2 a {
  color: #6e6e6e;
}
.main-content {
  display: flex;
  flex-direction: row;
  /* border:solid;
*/
  margin-left: 350px;
  margin-right: 60px;
}
.main-content-left {
  /* border:dashed;*/
  /*width: 200px;
 height: 200px;*/
  display: flex;
  flex-direction: column;
  flex: 0 1 60%;
  padding-right: 20px;
}
.main-content-left-heading {
  width: 100%;
  border-bottom: solid 1px #959595;
  padding-bottom: 20px;
  padding-top: 20px;
}
.main-content-right {
  /*border: dashed;*/
  /*width: 200px;
 height: 200px;*/
  margin-left: auto;
  flex: 0 1 40%;
}
.main-content-left-heading p {
  /*margin:0;
 padding:0;*/
  line-height: 100%;
}
.main-content-left-heading-1 {
  font-family: AvenirLTStd-Roman;
  font-style: italic;
  color: #6e6e6e;
}
.main-content-left-heading-2 {
  padding-top: 5px;
  font-family: AvenirLTStd-Roman;
  color: #6e6e6e;
  font-weight: bolder;
  font-size: 1.5rem
}
.main-content-left-image-1 {
  padding: 0;
  margin: 0;
  /* border: solid;
*/
  width: 100%;
  height: 360px;
  background-image: url("https://gallery.mailchimp.com/f68128197412f5658c731b840/images/010fa5bb-20b9-4603-8e31-3a5e053d936f.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}
.main-content-left-image-2 {
  padding: 0;
  margin: 0;
  /* border: solid;
*/
  width: 100%;
  height: 360px;
  background-image: url("https://gallery.mailchimp.com/f68128197412f5658c731b840/images/a49ee715-cd02-4b16-9164-941585e2fbbe.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.main-content-left-image-3 {
  padding: 0;
  margin: 0;
  /* border: solid;
*/
  width: 100%;
  height: 360px;
  background-image: url("https://gallery.mailchimp.com/f68128197412f5658c731b840/images/2b74f1ec-1a17-4c84-b162-ff62437cd705.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.main-content-left-text {
  /* border:solid;
*/
  display: flex;
  flex-direction: row;
  margin-top: solid;
  padding-top: 20px;
  /* padding-bottom: 20px;
*/
}
.main-content-left-text-group-left {
  padding: 10px 60px 10px 0px;
}
.main-content-left-text-group-left-1 {
  padding-bottom: 10px;
  font-family: SourceSansBold;
  font-size: 0.875rem;
  font-weight: 900;
}
.main-content-left-text-group-left-2 {
  font-family: SourceSansBold;
  font-size: 0.875rem;
  color: #888585;
  font-weight: 900;
}
.main-content-left-text-group-right {
  padding: 10px;
  border-left: solid 1px #959595;
}
.main-content-left-text-group-right-1 {
  font-family: Avenir-Next-LT-Pro-Demi;
  font-size: 1.45rem;
  padding-bottom: 20px;
  color: #444444;
  font-weight: bolder;
}
.main-content-left-text-group-right-2 {
  font-size: 1rem;
  font-family: SourceSansPro-Regular;
}
.main-content-right {
  border-left: solid 1px #959595;
  margin-top: 20px;
  padding-right: 65px;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
}
.main-content-right-heading {
  border-bottom: solid 2px #363636;
  height: 65px;
  display: flex;
}
.main-content-right-heading p {
  font-size: 0.9rem;
  margin-top: auto;
  font-family: SourceSansBolder;
  font-weight: bolder
}
.main-content-right-content {
  padding-top: 10px;
  padding-bottom: 10px;
  border-bottom: solid 1px #959595;
}
.main-content-right-image-1 {
  width: 100%;
  height: 180px;
  background: url("https://gallery.mailchimp.com/f68128197412f5658c731b840/images/2b74f1ec-1a17-4c84-b162-ff62437cd705.png") no-repeat;
  background-size: 100% 100%;
}
.main-content-right-image-2 {
  width: 100%;
  height: 180px;
  background: url("https://gallery.mailchimp.com/f68128197412f5658c731b840/images/2b74f1ec-1a17-4c84-b162-ff62437cd705.png") no-repeat;
  background-size: 100% 100%;
}
.main-content-right-image-3 {
  width: 100%;
  height: 180px;
  background: url("https://gallery.mailchimp.com/f68128197412f5658c731b840/images/2b74f1ec-1a17-4c84-b162-ff62437cd705.png") no-repeat;
  background-size: 100% 100%;
}
.main-content-right-group {
  /*border:solid;*/
  /* padding-bottom: 10px;
*/
}
.main-content-right-group-1 {
  padding-top: 10px;
  color: #b8b6b6;
  font-family: SourceSansBold;
  font-size: 0.875rem
}
.main-content-right-group-2 {
  padding-top: 10px;
  font-family: Avenir-Next-LT-Pro-Demi;
  font-weight: bolder;
  color: #444444;
  font-size: 1.1rem;
}

<header>
  <h1 class="banner-heading">Entrepreneurs Weekly</h1>
  <div class="secondary-heading">
    <h3 class="secondary-heading-1"><a href="">BECOME A CURATOR</a></h3>
    <h3 class="secondary-heading-2"><a href="">ABOUT</a></h3>
  </div>
</header>
<div class="main-content">
  <div class="main-content-left">
    <div class="main-content-left-heading">
      <p class="main-content-left-heading-1">Week 008,</p>
      <p class="main-content-left-heading-2">How To create the next Steve Jobs</p>
    </div>
    <div class="main-content-left-heading">
      <div class="main-content-left-image-1">
        <!--        <img src="assets/WeeklyContent1.png" />
 -->
      </div>
      <div class="main-content-left-text">
        <div class="main-content-left-text-group-left">
          <p class="main-content-left-text-group-left-1">POLITICS</p>
          <p class="main-content-left-text-group-left-2">NYTIMES.COM</p>
        </div>
        <div class="main-content-left-text-group-right">
          <p class="main-content-left-text-group-right-1">New York magazine turns a history of shopping recommendations into a new online revenue stream</p>
          <p class="main-content-left-text-group-right-2">Making money from $195 fitted sheets and Japanese women’s facial razors.</p>
        </div>
      </div>
    </div>
    <div class="main-content-left-heading">
      <div class="main-content-left-image-2">
        <!--        <img src="assets/WeeklyContent1.png" />
 -->
      </div>
      <div class="main-content-left-text">
        <div class="main-content-left-text-group-left">
          <p class="main-content-left-text-group-left-1">POLITICS</p>
          <p class="main-content-left-text-group-left-2">NYTIMES.COM</p>
        </div>
        <div class="main-content-left-text-group-right">
          <p class="main-content-left-text-group-right-1">The Texas Tribune updates its premium political coverage for an email</p>
          <p class="main-content-left-text-group-right-2">Making money from $195 fitted sheets and Japanese women’s facial razors.</p>
        </div>
      </div>
    </div>
    <div class="main-content-left-heading margin-end">
      <div class="main-content-left-image-3">
        <!--        <img src="assets/WeeklyContent1.png" />
 -->
      </div>
      <div class="main-content-left-text">
        <div class="main-content-left-text-group-left">
          <p class="main-content-left-text-group-left-1">POLITICS</p>
          <p class="main-content-left-text-group-left-2">NYTIMES.COM</p>
        </div>
        <div class="main-content-left-text-group-right">
          <p class="main-content-left-text-group-right-1">The Incline, Billy Penn’s new sister site, launches in Pittsburgh</p>
          <p class="main-content-left-text-group-right-2">Like Billy Penn in Philadelphia, the Pittsburgh site will focus on attracting a younger audience through events and aggregation in addition to original reporting.</p>
        </div>
      </div>
    </div>
  </div>
  <div class="main-content-right">
    <div class="main-content-right-heading">
      <p>THE LATEST FROM ENTREPRENEUR'S WEEKLY</p>
    </div>

    <div class="main-content-right-content margin-start">
      <div class="main-content-right-image-1">
        <!-- image goes as background -->
      </div>
      <div class="main-content-right-group">
        <p class="main-content-right-group-1">WEEK 01</p>
        <p class="main-content-right-group-2">New York magazine turns a history of shopping recommendations into a new online revenue stream</p>
      </div>

    </div>
    <div class="main-content-right-content">
      <div class="main-content-right-image-2">
        <!-- image goes as background -->
      </div>
      <div class="main-content-right-group">
        <p class="main-content-right-group-1">WEEK 01</p>
        <p class="main-content-right-group-2">New York magazine turns a history of shopping recommendations into a new online revenue stream</p>
      </div>
    </div>
    <div class="main-content-right-content">
      <div class="main-content-right-image-3">
        <!-- image goes as background -->
      </div>
      <div class="main-content-right-group">
        <p class="main-content-right-group-1">WEEK 01</p>
        <p class="main-content-right-group-2">New York magazine turns a history of shopping recommendations into a new online revenue stream</p>
      </div>
    </div>
  </div>
</div>

You seem to be using percentages to set their initial size (60% in your example). Isn't this expected behavior? Aren't the elements supposed to grow when your screen grows, regardless of the value of flex-grow? — Ian Emnace, Nov 04 '16 at 05:44
Thats true. the initial idea was the decrease their widths as the screen widths decrease (you know, for mobile). But alas the reverse is true too. — snow, Nov 04 '16 at 05:47
if you dont want the contents to stretch, you can put max-width to your container. — GvM, Nov 04 '16 at 05:47
@GvM that's a good idea. Although that would increase the whitespace and mess up the look — snow, Nov 04 '16 at 05:53
@GvM thanks for your time. I just want nothing to be stretched at any resolution and maintain the same amount of whitespace as it did at lower resolutions — snow, Nov 04 '16 at 06:15

score 2 · Accepted Answer · edited May 23 '17 at 11:52

2

This is the source of your problem:

.main-content-left-image-1 {
  padding: 0;
  margin: 0;
  width: 100%;   <---- problem
  height: 360px; <---- problem
  background-image: url("https://gallery.mailchimp.com/f6...");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}
.main-content-left-image-2 {
  padding: 0;
  margin: 0;
  width: 100%;   <---- problem
  height: 360px; <---- problem
  background-image: url("https://gallery.mailchimp.com/f6...");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

If you tell an image to be width: 100% and height: 360px, consider how that plays out.

The width is always the full length of the container. Whether the screen is wide or narrow, the image goes with it.

But you have set a fixed height of 360px. There's no flexibility there.

As a result, the image is flexible horizontally and inflexible vertically, which leads to a loss of aspect ratio / distortion.

There are several possible solutions to this problem:

edited May 23 '17 at 11:52

Community

1
1

answered Nov 04 '16 at 19:04

Michael Benjamin

346,931
104
581
701

hey @Michael_B, the accepted answer in one of the links you shared had mentioned `Do not set width, height, or margins.`. I don't think any sane person would try setting width and height to the background image. and doing that to the container with a background image won't show the image at all. – snow Nov 11 '16 at 11:52
There were a total of 17 answers in the links I provided. I reviewed them before posting them in my answer. There are various good solutions. The accepted answer is just one -- the one that happened to work for the person who posted the question. – Michael Benjamin Nov 11 '16 at 12:15
1

found the best solution among the lowest voted answers (it had only provided links). thanks – snow Nov 11 '16 at 13:14
Hi @Michael_B I will accept this answer if you include the method mentioned in http://www.outsidethebracket.com/responsive-web-design-fluid-background-images/ in your answer which solved my issue. Thanks. – snow Dec 06 '16 at 06:14
I'm familiar with that solution. The percentage padding trick is useful in some cases. I didn't recommend it to you because you're using flexbox, and not all browsers render percentage padding (and margins) as expected on flex items. Be sure to check your solution in Firefox. See here: http://stackoverflow.com/a/36783414/3597276 – Michael Benjamin Dec 06 '16 at 12:32
Didn't know that. Valuable info. So, would the percentage padding method would be a foolproof method if i am not using flex? – snow Dec 06 '16 at 13:59
Yes. I believe so. And it will work in flexbox across the board once browsers converge on a single rendering method. But I don't know when that will happen. – Michael Benjamin Dec 06 '16 at 14:06
so is there no other foolproof method, something like percentage padding, that will work across all browsers and all technologies? – snow Dec 06 '16 at 14:46

flex items stretching on wider screens

1 Answers1