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.
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!