Creating div containers within flex containers to allow for a shrink-wrapping effect

Is there a way to make these flex boxes shrink-wrap?

For example, turning them from:

To:

http://jsfiddle.net/frank_o/35hk7L84/1/

If we were to set flex-direction: row;, but without them being on the same line.

.main {
    display: flex;
    flex-direction: column;
    /* flex-direction: row; */
}
.other {
    color: white;
    background: blue;
    margin: 10px;
}
<div class="main">
    <div class="other">
        <p>Hello world</p>
    </div>
    <div class="other">
        <p>Hello other world</p>
    </div>
</div>

cssflexbox

Answer №1

Here is the solution you've been searching for (adjust the display property of each element):

.container {
  display: flex;
  flex-direction: row-reverse;
}

.item {
    color: black;
    background: yellow;
    margin: 20px;   
    display:flex;
}
<div class="container">
    <div class="item">
        <p>Hi there</p>
    </div>
    <div class="item">
        <p>Hey world</p>
    </div>
</div>

Helpful resources: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes

Additional info: http://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer №2

To achieve this, you can utilize the code snippet provided below.

For further information and to generate flex code with all properties, feel free to check out the following resources:

http://code.tutsplus.com/tutorials/an-introduction-to-the-css-flexbox-module--net-25655

http://the-echoplex.net/flexyboxes/


.main {
display: inline-flex;
flex-direction: column;

}
.other {
    color: white;
    background: blue;
    margin: 10px;
}
<div class="main">
    <div class="other">
        <p>Hello world</p>
    </div>
    <div class="other">
        <p>Hello world</p>
    </div>
</div>

Answer №3

If you're looking to achieve each element with a different size that shrinks to fit its content width without relying on flexbox, try this alternative approach:

.other {
clear:both;
    color: white;
    background: blue;
    margin: 10px;
    float: left;
}
<div class="main">
    <div class="other">
        <p>H</p>
    </div>
   
    <div class="other">
        <p>Hello world </p>
    </div>
    
    <div class="other">
        <p>Hello world</p>
    </div>
    
    <div class="other">
        <p>Hello world</p>
    </div>
    
    <div class="other">
        <p>Hello</p>
    </div>
    
    <div class="other">
        <p>Hello world12345678</p>
    </div>
</div>

Answer №4

My experience has shown positive results with the use of these CSS properties:

 width: -moz-max-content;
 width: -webkit-max-content;
 width: max-content;

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

Enhance your website design by incorporating CSS3 to display unique elements on

Could a scenario exist where only CSS (without JavaScript) accomplishes this: <ul> <li>a</li> <li>b</li> </ul> <div id="x" style="display:none;">c</div> Show the <div> when I hover over a <li& ...

csshover

Creating a three-column layout with position fixed in the center

I'm struggling with achieving a maximum width of 400px for the entire set of three columns and centering them. ---------------------------------------------------- | | | |----------------------------- ...

htmlcss

Unable to make boxes responsive to size changes in CSS when layered over video background

I am struggling to position my boxes on top of a video background in HTML/CSS. Despite my efforts, the boxes only appear at the bottom and do not move with any CSS adjustments I make. Is there something I am missing or doing wrong in my approach? I want to ...

htmlcss

Semantic UI allows for both left and right action input functionalities to be utilized

Is there a way to add actions on both ends of an input field? Here's what I've tried so far: <form class="ui form"> <div class="ui left action input"> <select class="ui compact selection dropdown" name="seats"> ...

htmlcsssemantic-ui

Can you provide a succinct explanation of what constitutes a well-defined "landing page"?

Could someone provide a clear and concise explanation of what exactly constitutes a landing page and how it should be utilized? I'm struggling to grasp the concept. Where is the optimal placement for a landing page on a website? Is it best placed o ...

javascriptphphtmlcsswordpress

Positioning a designated div directly above a designated spot on the canvas

I'm grappling with a challenge in my game where the canvas handles most of the animation, but the timer for the game resides outside the canvas in a separate div. I've been struggling to center the timer around the same focal point as the squares ...

javascripthtmlcsscanvas

Alternative solution for :has selector in Firefox without relying on JavaScript

Currently I am building a small website for a friend and incorporating the :has pseudo class. However, Firefox does not support this feature by default, unless manually enabled. Are there any workarounds available in this case? I am creating a hamburger m ...

cssfirefoxpseudo-class

Choose an identifier from a CSS class

I've been experimenting with a code pen that I stumbled upon: http://codepen.io/surjithctly/pen/pLDwe When I encase the checkbox in a div with the class "mynav," it stops functioning as intended. How do I implement the specified styling for the check ...

htmlcss

Transforming the color of Material Design Lite badges

Incorporating Material Design Lite (getmdl.io) into my web application, I have implemented a card with a badge displaying the number of notifications. Despite attempting to modify the css code as follows: .mdl-badge { background: #FF3D00; } I am unabl ...

csscss-selectors

I am trying to figure out how to style each box individually, but I'm running into some confusion. There are three different classes to choose from, with the child class

Struggling to style the ten boxes individually? Renaming each class of the box child didn't work as expected? Wondering how to select and style each box with a unique background color? Also facing issues with displaying the logo image on the navigatio ...

htmlcss

The Video Element Is Not Expanding to Fill the Entire Parent Div

My goal is to design a responsive layout where a video element spans the full width of its parent div with the class .hero. However, despite my best efforts, the video doesn't seem to be expanding as expected. Here's the relevant CSS code I' ...

htmlcss

Utilizing Robot Framework to select CSS attributes

The Selenium documentation provides an example of how to use Get Element Attribute: ${id}= Get Element Attribute css:h1 id However, I encountered a problem with this selector: ${VISIBILITY}= Get Element Attribute css:visibility mySidebar I ...

cssseleniumcss-selectorsrobotframework

Testing the compatibility of websites and applications across different web

After a recent Bootstrap upgrade, extensive CSS changes have been implemented across all pages of the web application I am currently working on. This particular application is designed to be mobile-friendly as well. My current task involves meticulously re ...

cssuser-interfacebrowsercross-browser

Determining the exact pixel height of a table row

Is there a way to use JavaScript to accurately determine the height of a table row in pixels? Specifically, I am looking for the measurement from the top of one green border to the top of the next green border. I have tried using jQuery's .height(), ...

javascriptjqueryhtmlcss

"What could be causing the sticky sidebar to not float as intended

Take a peek at this example where I implement the affix for the right sidebar (unfortunately, Bootstrap 4 doesn't have true affixes) - Violy Theme Right Sidebar Example. The sticky behavior is achieved through this style: .sidebar { border-radius: ...

htmlcssbootstrap-4

Is it feasible to have several polygons at once?

I am attempting to construct a unique pyramid using CSS properties like clip-path. Despite successfully creating a triangle, my efforts to create trapezoids beneath it have not been as fruitful. .container { min-width: 50%; max-width: 50%; } ...

csspolygoncss-shapesclip-path

The issue of duplicate CSS arising during the compilation of SASS into a single CSS file with G

Just getting started with Stack Overflow and Gulp (using version 3.9.1). My goal is to compile all of my scss files into a single css file for my website. Here's what I have in my gulpfile so far: var gulp = require('gulp'); var sass = requ ...

csssassgulpgulp-sassgulp-concat

What is the best way to ensure that the same information is included on every page of

Currently developing a dynamic website where certain components such as the fixed header, menubar, and footer are common across multiple pages. What is the best way to include these fixed components on every webpage? I am utilizing JSP and JavaScript for ...

javascripthtmlcssjsp

Tips for effectively utilizing the Angular ngIf directive for toggling the visibility of elements

<div *ngFor = "let element of myElements, let i=index" [ngClass]="{'selected':element[i] == i}"> <li> Name: {{element.element.name}}</li> <li> Description: {{element.element.description}}</li ...

htmlcssangulartypescriptangular-directive

Conceal/reveal div with initial partial visibility

http://jsfiddle.net/7RDBk/1/ At the moment, I am using slideUp and slideDown functions to hide and display a div. My goal is to have 25px of the div showing initially before expanding and going back to 25px when clicked. It seems like a simple task, but I ...

jquerycss