CODEWITHSUNDEEP
htmlcssflexboxcss-grid
GuitarExtended
GuitarExtended

Reputation: 827

Image among flex items within grid cell causes horizontal overflow

I have a simple grid design, with three rows and a single column. In one of the rows, I use flexbox to display 3 items horizontally. I'm testing all this with various window sizes and in responsive mode in both FF and Chrome.

When all three flex items are divs containing text, everything behaves as expected. When I replace one item with an img, I get something strange : I can't reduce the width of the window under a certain threshold without causing horizontal overflow (bottom scrollbar appearing). It looks like it wants to keep a certain aspect ratio.

I've made a codepen here : https://codepen.io/mavromatika/pen/rNOVLdE

Try commenting out the img and uncommenting <div>works</div>, and changing the window width.

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.contenant-presentation {
  height: 100%;
  width: 100%;
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: minmax(0, 1fr) 10fr minmax(0, 1fr);
}

.premiere-ligne {
  background-color: greenyellow;
}

.troisieme-ligne {
  background-color: greenyellow;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  height: 100%;
}

.troisieme-ligne div {
  /* height: 100%;*/
}

.troisieme-ligne img {
  max-height: 100%;
  width: auto;
}
<div class="contenant-presentation">
  <div class="premiere-ligne"></div>
  <div class="deuxième-ligne"></div>
  <div class="troisieme-ligne">
    <div>This</div>
    <div>works</div>
    <!--<img src="https://etc.usf.edu/clipart/65200/65255/65255_dipper_lg.gif">-->
    <div>fine</div>
  </div>

</div>

Upvotes: 1

Views: 89

Answers (1)

Soban
Soban

Reputation: 434

If you don't want the bottom scrollbar, try adding this:

.contenant-presentation{

  overflow-x: hidden;

 }

Upvotes: 1

Related Questions