Modify the width to fit the available space using flex containers

I'm currently working on adjusting the width of a container in case it cannot accommodate an additional character box.

IMAGE: Eliminate excess spacing by resizing the width

Here is the HTML code

    <section id="list_users">
        <div id="list_users_fill">
            <div class="character" id="me">
                <div class="user_img">
                    <img src="../../assets/images/avatar.jpg">
                </div>
                <div class="user_name">LUCA</div>
            </div>
            [...]
        </div>
    </section>

And here's the CSS code

main {
  [...]
}

#list_users {
  [...]
}

#list_users > div {
  [...]
}

.character {
  [...]
}

.user_img img{
  [...]
}

I have tried various approaches using flexbox and the width property, but I am unable to find a solution. I am wondering if this is even possible. Any guidance on this issue would be greatly appreciated. Thank you!

htmlcssflexboxwidth

Answer №1

To achieve evenly spaced images that are aligned in the center, consider using the CSS property: justify-content: space-evenly

Answer №2

To tackle this issue, one approach is to utilize the properties flex: 1, min-width, and max-width.
By doing so, you can customize it to better suit your preferences.

.character {
    min-width: 80px;
    max-width: 100px;
    flex: 1;
    height: 100px;
    background: #684D43;
    border-radius: 3px;
    text-align: center;
    color: #E1DED1;
    text-shadow: 0px 1px 0px rgba(0,0,0,0.6);
    text-transform: uppercase;
    font-weight: bold;
    line-height: 27px;
    margin: 10px 10px 0 0;
}

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

The scroll header remains fixed in size despite being responsive

I've been struggling to resize a fixed header when the page is scrolled. Unfortunately, I'm having trouble getting the header to adjust its size as the scrolling happens. $(document).scroll(function() { navbarScroll(); }); function navbarSc ...

javascriptjqueryhtmlcss

SQL Delete rows from Table

I am dealing with an issue where a table displaying notices has a clear option next to each row, but when the clear button is clicked nothing happens. The setup involves a button that triggers a clear function. What could be causing this problem? <bu ...

phphtml

CSS tip: Keep the bottom of the screen always visible in an overflow window

My webpage has a continuously updating element where new data is added to the bottom. I currently have 'overflow: scroll' enabled for users to manually scroll down and view this new information. However, I am looking for a way to display these up ...

cssscrolloverflow

Is it possible to create a CSS design where alternating table rows have two different heights?

Looking to design a table where the height of every other row is approximately one-third of the preceding row. I've managed to style this with an inline method, but I'm curious if it's possible to create separate tags for different tr styles ...

htmlcsshtml-table

Angular JS effectively prevents redundant data from being displayed to users when scrolling infinitely while also efficiently removing DOM elements for previous data

I'm currently working on implementing AngularJS Infinite Scroll without using jQuery. My goal is to display the first 3 data items when the page loads and then load the next 3 data items from a JSON array object as the user scrolls. The issue I am fac ...

javascriptcssangularjsjson

Utilize flexGrow property to make Material UI Grid container expand dynamically

I've been working on a chat window layout that features my users on the left and messages on the right. However, I'm facing an issue with making both columns extend to the end of the viewport or footer. Below is the component code I'm using: ...

cssflexboxmaterial-ui

`How can the background color be altered based on specific conditions?`

I am attempting to modify the background color. My goal is to change every odd result to a light green (#f0f5f5) to avoid a large white space when the result ends in an even number. I would also like to change the background color of the pagination section ...

javascripthtmlcss

Preventing the image from being displayed when it cannot fully show is achieved through blocking the background repeat

Is there a way in CSS to only display a background image if it can be fully shown without setting the width in pixels? I want to avoid showing partial background images. Is there a CSS property that can help with this? [] <div align="left" style="pad ...

htmlcss

Prevent external SDKs from displaying elements in full screen mode

My project involves using an SDK that displays a full-screen element on the page (100% width and height), but I need to limit this functionality. I am implementing Vue.js in this project. I attempted to render the element inside an iframe by following a d ...

htmlvue.jszoom-sdk

Can a Dashcode Webkit Web app be transformed into traditional HTML and CSS?

I have developed a blog using Dashcode, incorporating HTML, CSS, and Javascript to pull data from an xml file. It's pretty simple... My perspective on this is: 1. JavaScript should be compatible with all browsers (with some variations). 2. I may need ...

javascripthtmlwebkitcssdashcode

Instructions for adding transitions to an entire page in material-ui while maintaining a fixed AppBar

Is there a way to ensure that the material-ui AppBar remains fixed at the top while being wrapped with page contents in a transition? I want the AppBar to transition (e.g. Zoom or Slide) along with the rest of the page contents. I encountered this issue w ...

javascriptcssreactjsmaterial-ui

Tips for successfully sending hidden values along with an ajax file upload form

Currently, I am working on sending some values of hidden input using an ajax form. Despite trying several methods, it seems like the values are not being successfully transmitted. HTML <form id="upload_form" enctype="multipart/form-data" method="post" ...

htmlajaxuploader

Choosing custom element children once they're connected to the DOM: A guide

My goal is to retrieve the value of transaction-name__inputbox when the user clicks on the transaction-add__button. The function transactionAddHandler is triggered upon clicking the button. However, my attempt to select this element using document.querySe ...

javascripthtmltypescript

Pros and cons of leveraging a hybrid HTML/Objective-C app for the iPhone platform

When creating an app, what are the key benefits or drawbacks to consider when deciding between utilizing HTML/UIWebView for certain parts (such as styled menus and pages with complex layouts) versus going completely native? I'm eager to learn from ot ...

iphonehtmlobjective-cipaduiwebview

Utilizing a fallback option for HTML5 video with a flash player and the ability to manipulate the

My dilemma involves an HTML5 video where I am utilizing jquery to interact with the player using the code snippet: video.currentTime += 1;. However, when Internet Explorer switches to Flash plugins, my JQ commands cease to function. How can I manage and co ...

javascriptjqueryflashhtml

Retrieve the AJAX response data to be utilized in future operations

It appears that there is a bug in using INNERHTML where my SELECT OPTION tag becomes blank, based on the research I have done. I am trying to figure out how to create a variable containing my OPTION tags for later use, based on the JSON data below, but I a ...

jqueryhtmlajaxjsonglobal-variables

Show a loading image after clicking on an image or button using JavaScript

I recently created an App using PhoneGap and JqueryMobile. Transitioning between multiple HTML pages by clicking on images seems to be causing slow loading times, leaving end users unaware of what's happening in the background. I am looking for a way ...

javascriptjqueryhtmlcordovajquery-mobile

The issue of jumpy CSS background on full screen mode for mobile devices is causing

While developing a web app, I encountered an issue with the responsive (parallax) full screen background. On mobile devices, the background does not extend below the toolbar, causing a jumpy effect when scrolling up and down in Firefox. I have tried differ ...

cssmobile

Shifting focus among an array of standard <input> controls with each keystroke

When working with Angular, I encountered a situation where I have an array of arrays of numbers, as shown below: [ [1,1,1,1], [1,1,1,1] ] In my HTML file, I am using ngFor to generate input controls like this: <table> <tbody> ...

htmlangular

Jquery Fails to Execute When Clicking on Radio Button

Whenever a user selects a radio button, I want to display an alert box. I have already written the jQuery code to achieve this. Here is my implementation: <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></ ...

javascriptjqueryhtml