The container struggles to contain the excess of images spilling over

I'm having trouble getting a group of images to stay within their container in a grid layout, as they're overflowing vertically beyond the container's boundaries.

Is there a way to adjust their size so they match the height of their parent element?

.images-container {
  height: 70px;
  background-color: blueviolet;
  display: flex;
  flex-direction: row;
  justify-content: stretch;
}

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

img {
  width: 100%;
  height: auto;
}
<div class="images-container">
    <div class="images-column">
        <img src="https://i.sstatic.net/mCwEU.png" />
        <img src="https://i.sstatic.net/mCwEU.png" />
        <img src="https://i.sstatic.net/mCwEU.png" />
        <img src="https://i.sstatic.net/mCwEU.png" />
  </div>
    <div class="images-column">
        <img src="https://i.sstatic.net/mCwEU.png" />
        <img src="https://i.sstatic.net/mCwEU.png" />
        <img src="https://i.sstatic.net/mCwEU.png" />
        <img src="https://i.sstatic.net/mCwEU.png" />
  </div>
</div>

I need the images to fit vertically inside the blue area and scroll horizontally if necessary.

For a live example, check out the stackblitz.

htmlcssangularflexbox

Answer №1

To achieve the desired result, simply adjust the overflow property for the images container.

.images-container {
  height: 70px;
  background-color: blueviolet;
  display: flex;
  flex-direction: row;
  justify-content: stretch;
  overflow:auto;
}

Check out this jsfiddle solution for more details

Answer №2

In my opinion, incorporating

flex-direction: row;
overflow-x: scroll;

into your image column section

Answer №3

After some trial and error, I ultimately decided to utilize the CSS property flex-wrap: wrap:

<div
  style="
    margin-top: 5px;
    height: 500px;
    background-color: blueviolet;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
  "
>
  <img
    *ngFor="let image of allImages"
    [src]="image"
    style="
      object-fit: contain;
      max-height: 100%;
      height: auto;
      width: calc(25% - 10px);
      margin: 5px;"
  />
</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

JavaScript Popup prompting user on page load with option to redirect to another page upon clicking

Can a JavaScript prompt box be created that redirects to a site when the user selects "yes" or "ok," but does nothing if "no" is selected? Also, can this prompt appear on page load? Thank you! UPDATE: Answer provided below. It turns out it's simpler ...

javascripthtml

Book of Tales displaying Emotion Styling upon initial load only

I'm currently working with the styled api provided by emotion in order to create a custom styled button. const StyledButton = styled(Button)` background-color: ${theme.palette.grey['800']}; width: 50; height: 50; &:hover { ba ...

csstypescriptmaterial-uistorybook

Issue with host-context scss rules not appearing in final production version

I am facing an issue in my Angular project where the scss rules that define how components should look when within the context of another component are not being applied when I build for production and put it live. Here is an example: :host-context(my-tabl ...

cssangularsass

Unable to make changes to the text within the textarea field

Currently, I am in the process of creating a script to streamline the tedious task of providing teaching feedback. To scrape data such as student names and classes, I am utilizing selenium/python. While everything is running smoothly, I have encountered an ...

javascriptpythonhtmlselenium

"Help needed: The HTML dialog element is obstructing the invisible reCAPTCHA challenge popup. Any solutions for resolving this

Visit this link to access the example in incognito mode. Click on the "open" button to open the sample signin form, then click on the "Sign Up" button to trigger the challenge. There seems to be an issue with using recaptcha inside a dialog. I'm not ...

javascriptcssvue.jsrecaptchainvisible-recaptcha

Verifying if a number is present in a textbox when inserting text (without using setTimeout)

I have an input field similar to the one shown below: <input type ="number" id="numberTxt" placeholder="Number Only"/> To ensure that the value entered is a number, I am using the following function with the keypress event: <script> ...

javascriptjqueryhtmlevents

Enhance your title bar with an eye-catching image

Is there a way to add an image to the title bar? I currently have the title set as "Webnet". I attempted to combine it with a FontAwesome Glyphicon's icon image like this: <title><i class="icon-user icon-black"></i>Webnet</titl ...

htmlcssfaviconfont-awesomeglyphicons

Customize CSS for Vimeo's HTML5 player

Can I customize Vimeo's HTML and CSS attributes? I have a video that autoplays and I don't want the play button. I want to modify this specific class. .a.l .b .as { position: absolute; top: 50%; left: 50%; margin: -2em 0 0 -3.25em; float: none; ...

jquerycsshtmlvimeo

Guide to sending a request to a third-party API using Node.js and Express.js with the 'Authorization: Basic' header

Attempting to utilize the UDEMY API, each request necessitates the inclusion of Authorization: Basic + keys header. The API documentation specifies: curl --user {YOUR_CLIENT_ID}:{YOUR_CLIENT_SECRET} https://www.udemy.com/api-2.0/courses/ curl -H "Au ...

node.jsangularexpress

Using Angular 2 to Showcase JSON Array Data with Component Selector

I am struggling to showcase a specific array value, taxes, using the component selector without any success. At the moment, the component selector is displaying all values in the template/model. My goal is to only display the taxes value of the model. use ...

angular

Is there a way to trigger the click event in the week view of an Angular 2+ calendar?

https://i.sstatic.net/Vx2x8.png HTML Templates <mwl-calendar-week-view [viewDate]="viewDate" [refresh]="refresh" (click)="weekDayClick($event)"> </mwl-calendar-week-view> In the component file weekDayCl ...

angulartypescriptcalendarangular5angular-calendar

Top Margin: Supported by Chrome and Safari

After troubleshooting why the margin-top is not working on Safari, but works fine on Chrome, I discovered a discrepancy. Chrome Upon hovering over an item in the image, the cursor changes as expected. This feature operates smoothly in Chrome. https://i. ...

javascriptphphtmlcss

Ways to automatically close the external window upon logging out in Angular 12

I have successfully created an external window in my Angular application. Everything is working as expected, but I am facing an issue when trying to automatically close the external window upon user logout. Although I have written the code below and it wo ...

javascriptangularangular12

However, when it comes to the jQuery dropdown menu, the submenus open inwards rather than extending

I recently developed a jQuery menu that includes dropdowns. However, I encountered an issue where the subMenu items do not open to the left when hovered over. Despite my attempts to adjust the position using CSS properties such as absolute or relative posi ...

jquerycssmenuhover

Element with adhesive properties alters its color at a particular location

I need the sticky element to change colors at specific points and then revert back to its original color. The color should be orange initially, green on block 2, and orange again on block 3. For the complete code and to address any issues with jQuery, pl ...

javascripthtmljquerycss

Learning how to implement GraphQL in Angular without relying on the Apollo client library poses an exciting challenge for

Exploring ways to incorporate GraphQL into my Angular app without relying on the Apollo client. Any suggestions on how this can be achieved? Although I've used the Apollo client for connecting to a GraphQL API in the past, I'm curious about alte ...

angulargraphql

Angular: StaticInjectorError(ExplorationEditorPageModule)[Number]

Currently in the process of transitioning oppia's codebase from AngularJS(1.x) to Angular(2+). I recently migrated a service called UtilsService.ts to the following code snippet: import { Injectable } from '@angular/core'; import { downgrad ...

angularjsangularmigration

Showing a pop-up on a click of a dynamically created table row, showcasing information specific to that row

I am facing a challenge with my dynamically generated table that is based on the JSON response from an AJAX call. What I am trying to achieve is to display additional data in a modal when a table row is clicked. This would be simple if the data was hard co ...

javascripthtmlcssajax

Steps to ensure a dropdown menu remains expanded when its nested menu is selected

Check out this dropdown list here, but the issue arises when clicking on a nested menu item such as "Books Registration". Once that page loads, the dropdown menu collapses like shown here. Here's a snippet of the dropdown code: <ul class="nav nav- ...

javascripthtmlcssdrop-down-menu

Despite my attempts to force a repaint, the progress bar remained static during intensive tasks

My JavaScript method works fine in Chrome, taking about 2000 ms to iterate over ~200 inputs, insert values, and trigger onchange events. However, it's a different story in IE where it takes about 10000 ms. To show the progress of this process, I deci ...

javascriptjqueryhtmlcssrepaint