0

I have the following simple HTML and CSS:

.profile {
  width: 80%;
  margin-top: 15vh;
  margin-left: 10%;
  display: flex;
  float: left;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: green;
}

.profile_picture {
  float: left;
  width: 100%;
  height: 70%;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
}

.profile_picture img {
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
}

.profile_discription {
  padding: 1%;
  float: left;
}
<div class="profile">
  
  <div class="profile_picture">
  <img src="http://placehold.it/450x150">
  </div>
   
  <div class="profile_description">
  <p> Description goes here. </p>
  </div>
   
<div>

The code displays a website with a profile consisting of a picture and a description.
You can also find the code in the jsfiddle here.

All this works fine so far.

However, the problem is that once I us the display: flex; property in the class .profile the picture is shown in different sizes depending if I use Edge, Firefox or Chrome.

Do you have any idea how I can avoid the different sizes of the picture and still be able to use the display:flex; property?

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Michi
  • 4,663
  • 6
  • 33
  • 83
  • I'm seeing an identical rendering across Edge, Chrome and FF (latest versions). – Michael Benjamin Oct 07 '18 at 16:17
  • Strange. I downloaded Chrome today and I have the latest version of FF so not sure what is different on my site. – Michi Oct 07 '18 at 16:25
  • The issue only happens if I use the code in a full screen of the website. Just running the code here in stackoverflow does not reproduce the issue. – Michi Oct 07 '18 at 16:28
  • Just ran the code on full-screen on all 3 browsers. No difference. – Michael Benjamin Oct 07 '18 at 16:33
  • 1
    BTW, if you're interested in removing that gap underneath the image, see my answer here: https://stackoverflow.com/q/31444891/3597276 – Michael Benjamin Oct 07 '18 at 16:34
  • Thanks for the additional help. However, the strange thing is that this gap on my site only exists on the snipped in stackoverflow and jsfiddle. When I load the same code on full-screen there is no gap. How is it on your site? – Michi Oct 07 '18 at 16:39
  • Maybe on your site there is additional code that applies. – Michael Benjamin Oct 07 '18 at 16:42

0 Answers0