Flex items rendering smaller than specified by width / height

Question

I have a webpage made with flexbox (this part at least). To the right are a few images which appears really small, although it should be way bigger.

Anyone can see what the problem may be ?

Here you can see what it looks like to me:

I tried making the image in percentage and trying the padding and margins of the paragraphs, nothing works.

.Capital {
  margin: 0px 0 -5px 0;
  line-height: 63px;
  font-size: 60px;
  font-weight: ligter;
}

.smalltext {
  text-align: center;
  margin-top: 0px !important;
  font-weight: 100px;
  font-size: 14px;
}

.smalltextpub {
  text-align: center;
  margin-top: 0px !important;
  font-weight: 100px;
  font-size: 14px;
  margin-left: -5px;
}

#hoverr:hover {
  border-radius: 25px;
  background: #464646;
  padding: 20px;
  width: 100px;
  height: 100px;
  text-align: center;
  color: #fff;
  font-family: Arial;
  padding-top: 10px;
  text-decoration: none;
}

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.left {
  width: 25%;
}

.paragraphs {
  padding: 0 9%;
  flex-grow: 0;
}

.container img {
  width: 600px;
}

.square {
  border-radius: 25px;
  background: #769DBD;
  padding: 20px;
  width: 100px;
  height: 100px;
  text-align: center;
  color: #fff;
  font-family: Arial;
  padding-top: 10px;
  text-decoration: none;
}

* {
  box-sizing: border-box;
}

<div class="container">
  <div class="left">
    <div id="methods" class="square"><span class="Capital">M</span>
      <span class="smalltext">Methods</span></div>
  </div>
  <div class="paragraphs">

    Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem
    IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem

  </div>
  <img src="http://www.placebacon.net/400/300" alt="Bacn">

</div>
<div class="container">
  <div class="left">
    <div id="background" class="square"><span class="Capital">B</span>
      <span class="smalltextpub">Background</span></div>
  </div>
  <div class="paragraphs">

    Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem
    IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem

  </div>
  <img class="imageright" src="http://giscience.zgis.at/gisce/wp-content/uploads/2017/08/300x200.png" />

</div>

Answer 1

An initial setting on flex items is flex-shrink: 1. This means that items are permitted to shrink as needed to avoid overflowing the container.

You need to disable this feature.

Add this to your code:

.container img {
  width: 600px;
  flex-shrink: 0;
}

Or, based on a recommendation in the flexbox spec, use this method:

.container img {
  flex: 0 0 600px; /* flex-grow, flex-shrink, flex-basis */
}

7.2. Components of Flexibility

Authors are encouraged to control flexibility using the flex shorthand rather than with its longhand properties directly, as the shorthand correctly resets any unspecified components to accommodate common uses.

.Capital {
  margin: 0px 0 -5px 0;
  line-height: 63px;
  font-size: 60px;
  font-weight: ligter;
}

.smalltext {
  text-align: center;
  margin-top: 0px !important;
  font-weight: 100px;
  font-size: 14px;
}

.smalltextpub {
  text-align: center;
  margin-top: 0px !important;
  font-weight: 100px;
  font-size: 14px;
  margin-left: -5px;
}

#hoverr:hover {
  border-radius: 25px;
  background: #464646;
  padding: 20px;
  width: 100px;
  height: 100px;
  text-align: center;
  color: #fff;
  font-family: Arial;
  padding-top: 10px;
  text-decoration: none;
}

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.left {
  width: 25%;
}

.paragraphs {
  padding: 0 9%;
  flex-grow: 0;
}

.container img {
  flex: 0 0 600px; /* new */
}

.square {
  border-radius: 25px;
  background: #769DBD;
  padding: 20px;
  width: 100px;
  height: 100px;
  text-align: center;
  color: #fff;
  font-family: Arial;
  padding-top: 10px;
  text-decoration: none;
}

* {
  box-sizing: border-box;
}

<div class="container">
  <div class="left">
    <div id="methods" class="square"><span class="Capital">M</span>
      <span class="smalltext">Methods</span></div>
  </div>
  <div class="paragraphs">

    Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem
    IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem

  </div>
  <img src="http://www.placebacon.net/400/300" alt="Bacn">

</div>
<div class="container">
  <div class="left">
    <div id="background" class="square"><span class="Capital">B</span>
      <span class="smalltextpub">Background</span></div>
  </div>
  <div class="paragraphs">

    Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem
    IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem

  </div>
  <img class="imageright" src="http://giscience.zgis.at/gisce/wp-content/uploads/2017/08/300x200.png" />

</div>