Flexbox allows for the overflow of images within a container

Need help keeping my images from overflowing the <div class="display"> container and maintaining a square/box shape

It should work with flexbox.

Currently, the code displays 3 images with 1 extending outside the box, which is not the desired outcome.

.display {
  min-width: 500px;
  max-width: 500px;
}

.scenery {
  display: flex;
  flex-direction: column;
}

.scenery_1 {
  display: flex;
}

.scenery_2 {
  display: flex;
}
<div class="display">
<div class="scenery">
  <div class="scenery_1">
    <img src="https://s-media-cache-ak0.pinimg.com/736x/02/e1/52/02e1528600a592817fbfa1c67158c13f.jpg" alt="display">
    <img src="https://s-media-cache-ak0.pinimg.com/736x/02/e1/52/02e1528600a592817fbfa1c67158c13f.jpg" alt="display">
  </div>
  <div class="scenery_2">
    <img src="https://s-media-cache-ak0.pinimg.com/736x/02/e1/52/02e1528600a592817fbfa1c67158c13f.jpg" alt="display">
    <img src="https://s-media-cache-ak0.pinimg.com/736x/02/e1/52/02e1528600a592817fbfa1c67158c13f.jpg" alt="display">
    <img src="https://s-media-cache-ak0.pinimg.com/736x/02/e1/52/02e1528600a592817fbfa1c67158c13f.jpg" alt="display">
  </div>
</div>
</div>

htmlcssflexbox

Answer №1

It seems unnecessary to use display: flex in this case, but you can achieve the desired result with the following code:

.display {
  min-width: 500px;
  max-width: 100%;
  display: block; /* Include this line and remove the rest */
}
<div class="display">
  <div class="scenery">
    <div class="scenery_1">
      <img src="https://s-media-cache-ak0.pinimg.com/736x/02/e1/52/02e1528600a592817fbfa1c67158c13f.jpg" alt="display">
      <img src="https://s-media-cache-ak0.pinimg.com/736x/02/e1/52/02e1528600a592817fbfa1c67158c13f.jpg" alt="display">
    </div>
    <div class="scenery_2">
      <img src="https://s-media-cache-ak0.pinimg.com/736x/02/e1/52/02e1528600a592817fbfa1c67158c13f.jpg" alt="display">
      <img src="https://s-media-cache-ak0.pinimg.com/736x/02/e1/52/02e1528600a592817fbfa1c67158c13f.jpg" alt="display">
      <img src="https://s-media-cache-ak0.pinimg.com/736x/02/e1/52/02e1528600a592817fbfa1c67158c13f.jpg" alt="display">
    </div>
  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Converting Umbraco Json to a CSS class named "[]"

I'm currently using Umbraco with the data-type grid layout and I am trying to add custom settings (CSS classes) to each row/cell. The results are somewhat working, but I want to improve it. Here's the user interface: https://i.stack.imgur.com/iY ...

htmlcssjsonumbracoumbraco7

Ion-row appears out of frame

This is a simple layout: <ion-content> <ion-grid *ngIf="loaded"> <ion-row> <ion-col>Stuff</ion-col> <ion-col>Stuff</ion-col> <ion-col>Stuff</ion-col> </ion-row> < ...

cssionic-frameworkionic2

Troubleshooting problems with CSS when zooming in and out

My CSS is designed for screen sizes larger than 1100 pixels. However, when I zoom in using ctrl and the plus sign, the center container on the page fails to wrap properly and suddenly breaks. HTML: <div id="outer_footer_bottom"> <div class=" ...

htmlcss

"Comparison: Utilizing HTML5 Video Player with IE8 Embed Fallback versus Implementing Fixed

This dilemma has me at my wit's end. In an HTML5 Video element, I've included an mp4, ogg, and an embedded mp4 fallback. However, on the embed fallback in IE8, all my attempts to position the fixed element (#fixed) above it with z-indexing have f ...

csshtmlvideoembedcss-position

Utilize jQuery to toggle the visibility of one specific div among others with the same class

I'm currently working on a comment and like system similar to Facebook. However, I am struggling to select the specific div element! Here is a snippet of my current HTML: <div class='activoptions'><a href='#'>Like< ...

jqueryhtmlcss

Issue with Ajax request failing to successfully send and retrieve raw HTML data

Utilizing an Ajax call to trigger a C# method that is responsible for processing user paste input by eliminating unwanted html tags and attributes. Encountering an issue where my Ajax call fails when I paste in content with html formatting (containing tag ...

htmlajaxmodel-view-controlleractionresultcontenttype

PHP function array_sum returns the sum of all values in an array rather than displaying each number

I have a collection of unique "coupons" with corresponding "productid"s https://i.stack.imgur.com/IgtFN.png My goal is to transform this list into an array using: $claimed = array($rowOrder['productid']); The problem arises when I attempt to ...

phphtmlmysqlpdo

The CSS module is disappearing before the Framer Motion exit animation finishes when the path changes

Source Code Repository: https://github.com/qcaodigital/cocktail_curations Live Site: I recently deployed my NextJS project to Netlify and everything seems to be working fine, except for one issue. Each page has an exit animation (currently set to change ...

cssreactjsnext.jscss-modulesframer-motion

Modifying SAS ODS contentitem in PROC SQL SELECT query

When using SAS to generate ODS output in HTML format, you have the option to include a table of contents with the "CONTENTS" and "FRAME" settings: ODS HTML PATH="C:\Path\" (url=none) BODY="body.html" CONTENTS="contents.html" ...

htmlsqlsas

Use jQuery to dynamically alter color based on conditional statements

What could be causing the background color not to change to green? var id; id = setInterval(changeColor, 1000); function changeColor(){ var elem= $("#target"); var color = elem.css('background-color'); if (color == &apos ...

javascripthtmljquerycss

How to effectively manage an overflowing navigation bar

I am currently facing a challenge with the main navigation bar on my website, specifically with how it handles an overflow of links on smaller screen resolutions. I have attempted to adjust the height of the navigation bar at smaller media queries, but I&a ...

phpjqueryhtmlcss

Enhancing 2D video viewing with Threejs interactivity

I want to create an interactive 2D video using three.js and maintain the aspect ratio of the video when resizing the browser window. Here is the code I am currently using: var camera, scene, renderer; var texture_placeholder, distance = 500; init() ...

javascriptcssvideothree.js

Issues with plugins in Rails 4 are causing functionality to not be operating

I recently installed a template and encountered an issue with some of the JavaScript functionality. However, upon checking the compiled list of JavaScript files, I can see that all the files have loaded successfully and the CSS includes all the necessary f ...

javascriptjqueryhtmlcssruby-on-rails

Update the div element without needing to reload the entire page

Is there a way to reload a div tag without refreshing the entire page? I understand this question has been asked before, but I want to make sure I have a clear understanding. <p>click HERE</p> <div class="sample"> <?php functi ...

javascriptphpjquerycss

Personalized Bootstrap grid rows and columns

https://i.sstatic.net/R0yFY.png As a beginner in Bootstrap, I am having trouble achieving this specific layout in Bootstrap 4 grid. The areas marked in red are not appearing as expected. Here is what I have attempted so far: <div class="row"> ...

cssbootstrap-4

Having trouble making setTimeout work with a nested function in it

I've encountered an issue with the setTimeout() function. Take a look at my code snippet below: $('#start').click(function(event) { var result = Math.floor(Math.random() * (10000 - 4000 + 1)) + 4000; // generates a random value between ...

jqueryhtmlcss

How can I switch between columns in a dual-column layout?

In my latest project, I utilized CSS Flexbox to create a sophisticated two-column layout that allows toggling each column independently. While this functionality is exactly what I need, I can't help but feel that my current method is somewhat cumberso ...

jqueryhtmlcssflexbox

guide for interpreting a complex json structure

I'm attempting to extract data from a JSON file that has multiple layers, like the example below. - "petOwner": { "name":"John", "age":31, "pets":[ { "animal":"dog", "name":"Fido" }, ...

javascripthtmljsonxmlhttprequest

Is there a way to utilize local resources in case CDNs are unable to load properly?

Encountering an issue with Bootstrap and jQuery loading from CDN, sometimes failing to import from the CDN source. For instance: <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYii ...

javascripthtml

Is there a way to dynamically change the source of an image based on different screen sizes using Tailwind CSS?

Currently, I am utilizing the next/Image component for setting an image and applying styling through tailwindcss. However, I have encountered a roadblock at this juncture. My Objective My goal is to dynamically change the src attribute of the image based ...

javascriptcssreactjsnext.jstailwind-css