CODEWITHSUNDEEP
htmlcssimageflexbox
James Bradley
James Bradley

Reputation: 155

Keep flex items inside parent container

I'm trying to create an element that will hold various images that should be responsive (width AND height). So far using flexbox has been successful except for one thing. Every time I reduce the width of my window, at a certain point, the flex items overflow the parent container and spill out beyond the containers width. 

nav {
    position: fixed;
    top: 0;
    left: 0;
    height: 80px;
    line-height: 80px;
    background: black;
    color: #fff;
    width: 100%;
    text-align: center;
}
body, p {
    margin: 0;
    padding: 0;
    width: 100vw;
}
.wrapper {
    height: 100vh;
    margin: 100px auto;
    min-width: 0;
}
.flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    max-width: 100%;
    min-width: 200px;
    flex-wrap: nowrap;
}
img {
    max-height: 100%;
    max-width: 100%;
}
.txt-rt {
    text-align: right;
}
.footer {
    background: darkgray;
    height: 300px;
    text-align: center;
}
<nav>This is a Navbar</nav>
<div class="wrapper">
    <div class="flex">
        <p>hello</p>
        <img src="https://upload.wikimedia.org/wikipedia/commons/e/eb/Ash_Tree_-_geograph.org.uk_-_590710.jpg" alt="">
        <p class="txt-rt">world</p>
    </div>
</div>
<div class="footer">
    <h3 class="footer">Footer content</h3>
</div>

In this CodePen example, each time the window width is <560px or so and the height is at least 600px, the image is no longer responsive in width and the content overflows outside the screen.

All the other functionality looks like it's working as expected, but once I reduce my window width to a certain point the image will not shrink down. This prevents all 3 flex items being viewable in the width of the screen. Is there code I should be adding - not media queries since various sizes of images will be used - to make sure the image is responsive no matter the size of the window? Note: I don't want the items to wrap down to a second line.

Upvotes: 2

Views: 6823

Answers (2)

Piyush Teraiya
Piyush Teraiya

Reputation: 747

You can use this code

* {
  box-sizing: border-box;
}

body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  margin: 0;
  text-align: center;
}

#main {
  display: flex;
  flex: 1;
  flex-direction: column;
}

#main>article {
  flex: 1;
  text-align: center;
}

#main>nav,
#main>aside {
  background: beige;
}

#main>nav {
  order: -1;
}

header,
footer {
  background: yellowgreen;
  height: 20vh;
}

header,
footer,
article,
nav,
aside {
  padding: 1em;
}

@media screen and (min-width: 576px) {
  #main {
    flex-direction: row;
  }
  #main>nav,
  #main>aside {
    flex: 0 0 20vw;
  }
}
<header>This is a Navbar</header>
<div id="main">
  <article><img src="https://upload.wikimedia.org/wikipedia/commons/e/eb/Ash_Tree_-_geograph.org.uk_-_590710.jpg" alt=""></article>
  <nav>hello</nav>
  <aside>world</aside>
</div>
<footer>Footer content</footer>

Upvotes: 1

Saad Mehmood
Saad Mehmood

Reputation: 731

.flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    max-width: 100%;
    min-width: 200px;
    flex-wrap: wrap; // this will move your content to new line if there is less space
}

Upvotes: 1

Related Questions