"Utilize HTML to make inline-block elements appear small in size while giving the illusion of being

I have a group of inline-block elements (4 total), all arranged neatly in a single row. As the window size changes, the elements wrap to the next line accordingly. The page does not display scrollbars at the bottom until the browser width reaches the minimum required for the widest element.

This is what I like to call the "Acting Small" feature.

However, when it comes to appearing big, I want the elements to look as if they are occupying as much space as possible on their respective lines.

The ideal outcome would be that when all four elements are stacked vertically, they should all be the same width, specifically matching the widest one. Whether there are X elements on one row, Y on another (perhaps even Z on a third in the future), each row's elements should expand to match the width of the widest row.

In my attempts to achieve this, I've observed that the container div designed for accommodating them adopts its maximum width once wrapping occurs.

I hope to accomplish this without resorting to excessive hacks, but I am open to any suggestions or solutions.

If necessary, although I prefer to avoid JavaScript, feel free to suggest otherwise if it proves unavoidable.

View the Fiddle Here

Below is the code snippet from the fiddle:

<style>
.centerParent {
  text-align: center;
  background-color: white;
  border: 1px solid black;
}

.shrinkwrap {
  display: inline-block;
  margin: 0px 12px;
  border: 1px solid blue;
}

span {
  display: inline-block;
  padding: 4px 12px;
  margin: 6px;
  border: 1px solid black;
}
</style>
<div class="centerParent">
  <p>
    other content
  </p>
  <div class="shrinkwrap">
    <span>MotherDuck</span>
    <span>Duckling The First</span>
    <span>Duck2</span>
    <span>JackInTheBox</span>
  </div>
  <p>
    -- resize left right --
  </p>
</div>

Thank you for your assistance!

Answer №1

Additionally, building on @Error404's response, if you desire each element to be proportionally sized and expand based on their own content, utilize flex: 1 0 auto;

.centerParent {
  text-align: center;
  background-color: white;
  border: 1px solid black;
}
.shrinkwrap {
  display: flex;
  flex-wrap: wrap;
  margin: 0px 12px;
  border: 1px solid blue;
}
span {
  flex: 1 0 auto;
  padding: 4px 12px;
  margin: 6px;
  border: 1px solid black;
}
<!--Master div for centering children-->
<div class="centerParent">
  <p>
    other content
  </p>
  <!-- ShrinkWrap Container -->
  <div class="shrinkwrap">
    <span>MotherDuck</span>
    <span>Duckling The First</span>
    <span>Duck2</span>
    <span>JackInTheBox</span>
  </div>
  <p>
    -- resize left right --
  </p>
</div>

Answer №2

To ensure that all spans fill the available space within a container, you can apply display: flex to the container and assign flex: 1 to each span.

*{
  box-sizing: border-box; /* This new setting ensures widths include borders and padding */
}

.centerParent {
  text-align: center;
  background-color: white;
  border: 1px solid black;
}

.shrinkwrap {
  display: flex; /* Utilize flexbox */
  flex-wrap: wrap; /* Make elements flow to next line if needed */
  margin: 0px 12px;
  border: 1px solid blue;
}

span {
  flex: 1; /* Allows spans to fill available space */
  padding: 4px 12px;
  margin: 6px;
  border: 1px solid black;
}
<!-- Master div for aligning children in center -->
<div class="centerParent">
  <p>
    other content
  </p>
  <!-- Container with flex layout -->
  <div class="shrinkwrap">
    <span>MotherDuck</span>
    <span>Duckling The First</span>
    <span>Duck2</span>
    <span>JackInTheBox</span>
  </div>
  <p>
    -- resize left right --
  </p>
</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

Vue application experiencing issues with applying Sweet Alert CSS styles

I successfully integrated vue-sweetalert2 into my Vue app (version 2.6). The setup in my main.js file looks like this: import VueSweetalert2 from 'vue-sweetalert2'; Vue.use(VueSweetalert2); In one of my components, I have a basic button with a ...

Is there a way to redirect links within an iframe when a user decides to open them in a new tab?

I am currently developing a web application that allows users to access multiple services, such as Spark and others. When a user selects a service, like Spark for example, the app will open a new tab displaying my page (service.html) with user information ...

Comparison of Chrome's compatibility with Bootstrap and Edge

Firefox Safari I am facing an issue that seems obvious, but I am unable to pinpoint the exact cause. It just doesn't seem right for no apparent reason. is the website in question. I have tried various troubleshooting methods such as inspecting th ...

The fieldset css in PrimeNG differs from the website's original design

On my website, the appearance of the fieldset can be seen here: https://i.stack.imgur.com/TTS8s.jpg. I did not make any CSS changes that altered the fieldset. I am utilizing primeNG v7 and Angular 7. <p-fieldset legend="Toggleable" [toggleable]="true" ...

What is the best way to include a maximum height in my ScrollToBottom element?

I am currently attempting to limit the maximum height of my component as adding user messages causes it to expand and stretch the whole page. However, I have been unsuccessful in setting a maxHeight property for the component. I am utilizing ScrollToBottom ...

Automatically populating form fields with Selenium (less-than-stellar HTML present)

My current task involves: Entering my email Clicking submit If the message "check again later" is displayed, repeat until the message changes to "you are in!" Here's the code snippet I have written so far: PATH = "D:\Program Files (x86)&bs ...

Is the indigo-pink color scheme fully implemented after installing @angular/material and scss using ng add command?

After running ng add @angular/material, we are prompted to choose a CSS framework and theme. I opted for indigo-pink and scss. Will the material components automatically inherit this theme, or do we need to take additional steps? When using normal CSS (wi ...

Having trouble with the auto width CSS for the center section of my webpage

I am facing an issue with assigning widths to my divisions using the CSS calc property. Despite setting the width for the first and last divisions, I am unable to allocate any width to the middle division. HTML: <div style="width:400px;"> <div ...

What is the best way to target the final child element of a specific CSS class?

I am working with an HTML table and my goal is to remove the border-bottom from the last row, excluding the row with class .table-bottom: <table cellpadding="0" cellspacing="0" style="width:752px;" class="table"> <tr class="table-top">< ...

Utilizing SCSS Interpolation within a mixin invocation

My goal is to incorporate a simple interpolation into a mixin call: $shapes: "square", "square-green", "circle"; $platforms: "facebook", "twitter", "linkedin", "gplus", "feed"; @each $shape in $shapes { @include sprite-#{$shape}; @each $platform ...

Adjust the style of an element when hovering over a different element

Below is the HTML code in question: <div> class="module-title" <h2 class="title" style="visibility: visible;"> <span>Spantext</span> Nonspantext </h2> </div> I am looking to change th ...

Can certain parts of an MP4 file be accessed remotely through a network connection?

With modern MP4 players, you have the ability to skip to any part of a video without needing to download the entire file. Take a look at this example video: You can navigate to any point in the video before it finishes downloading. I am curious if there ...

The download attribute is not functioning properly on both Chrome and Edge browsers

I've been trying to use the download attribute, but it doesn't seem to be working. I have also attempted to use the target attribute to see if there are any issues with downloading from the server or from a web (https) source. Unfortunately, noth ...

Three.js is not displayed by the browser

I've recently delved into the world of webGL and three.js and decided to try out an example from JSFiddle, http://jsfiddle.net/BlackSRC/XWCRM/1/ However, upon testing it, I'm facing an issue where nothing is showing up on the screen. Here is th ...

The background image is failing to display

I am currently working on a subpage for my website that includes a navigation bar and footer. I am looking to add a background image behind the navigation bar, similar to this design. https://i.stack.imgur.com/j6fDZ.jpg After trying various methods, I at ...

Javascript: struggling with focus loss

Looking for a way to transform a navigation item into a search bar upon clicking, and revert back to its original state when the user clicks elsewhere. The morphing aspect is working correctly but I'm having trouble using 'blur' to trigger t ...

Display an image from a Google image search when hovering over a specified data attribute

My goal is to add a code snippet that will assign a class of "hoverme" to a table cell. When a user hovers over that cell, an ajax query will be triggered using the data attribute containing information stored there to perform a Google search. Below is a ...

*ngIf doesn't seem to be functioning as expected compared to other *ngIf directives

Encountering a peculiar issue with my *ngIf related to the isAdmin variable which determines whether the list of users in userList should be displayed or not. Strangely, it seems to behave differently compared to other *ngIf statements within the same comp ...

What is causing Microsoft Edge to highlight this span and behave as though it's a hyperlink?

I am currently in the process of redesigning a website, and I've encountered an issue with the header markup. While the design looks fine on most browsers, it behaves strangely in Microsoft Edge on Windows 10. The phone number in the header is inexpli ...

``To ensure Google Maps fills the entire height of its parent div, set the

Is there a way to display a Google Map at 100% of the parent div's height? I've noticed that setting the height to 100% makes the map not visible, but if I use a pixel value for the height, the map displays correctly. Are there any tricks or solu ...