Clever Geek Handbook

CSS: How to scale a container to the width of a dynamically sized child?

I am trying to create a page with multiple responsive containers that will contain multiple static sized elements as well as an additional element with dynamic width and height.

The scaling in css is a bit rough as I pushed it out of the larger sheet, but I hope this shows what I'm going for.

So what I can't seem to work is this: I'd really like the dynamic container to use the width of the dynamic element inside it. The container must be the width of the dynamic element, and the static sized elements inside must order themselves within the container's width, expanding the height as needed.

I should also point out that I would appreciate a clean CSS solution. I have no such option where this should be deployed.

EDIT: I seem to have caused some confusion, so I'll clarify. The static container is exactly how I want it. It wraps around correctly and everything is fine. The container containing the dynamic (blue) element is the one I'm having problems with. I want the blue element container to take the width of the blue element. Red elements should wrap and increase the height of the dynamic container if needed.

I am unable to change the HTML layout. I can add additional classes to the html if needed.

I made an updated fiddle with how I would like the result to look. But I need it to be dynamic. So I can't just set the width of the container as I did it: https://jsfiddle.net/mnybon/nwa0gx1h/1/

I have a js fiddle here as well as source code to archive https://jsfiddle.net/mnybon/nwa0gx1h/

CSS

.site {
  height: 100vh;
  width: 100vw;
  background-color: rgb(40, 40, 40);
  overflow-x: hidden;
  overflow-y: auto;
}

.container {
  min-width: 30vw;
  max-width: 100%;  
  background-color: green;
  box-sizing: border-box;
  padding: 1vh 1vw;
  text-align: center;
  display: inline-block;
}

.container.fixed{
  width: 30vw;
}

.fixedsize-element {
  background-color: red;
  width: 50px;
  height: 50px;
  display: inline-block;
  margin: 2px;
}

.variable-element {
  width: 44vw;
  height: 20vh;
  background-color: blue;
  margin: auto;
}

Html

<div class="site">
  <div class="container dynamic">
    <div class="fixedsize-element">

    </div>
    <div class="fixedsize-element">

    </div>
    <div class="fixedsize-element">

    </div>
    <div class="fixedsize-element">

    </div>
    <div class="fixedsize-element">

    </div>
    <div class="fixedsize-element">

    </div>

    <div class="fixedsize-element">

    </div>

    <div class="fixedsize-element">

    </div>

    <div class="fixedsize-element">

    </div>
    <div class="variable-element">

    </div>
    <div class="fixedsize-element">

    </div>

    <div class="fixedsize-element">

    </div>

    <div class="fixedsize-element">

    </div>

    <div class="fixedsize-element">

    </div>

  </div>

  <div class="container fixed">
    <div class="fixedsize-element">

    </div>
    <div class="fixedsize-element">

    </div>
    <div class="fixedsize-element">

    </div>
    <div class="fixedsize-element">

    </div>
    <div class="fixedsize-element">

    </div>
    <div class="fixedsize-element">

    </div>

    <div class="fixedsize-element">

    </div>

    <div class="fixedsize-element">

    </div>

    <div class="fixedsize-element">

    </div>
  </div>
</div>
+3


source to share


2 answers


I see that you are looking for flexible css fields . Example:

.container {
    display: flex;
    flex-wrap: wrap;
}

.dynamicsize-element {
    flex: 100%;
}


Take a look at my jsfiddle: https://jsfiddle.net/rpje8Lyb/1/

+2


source


If you want 2 containers vertically aligned and it should occupy the width of the variable sized child try this

display: table-caption → These elements behave like HTML elements. but this results in a vertical layout.

Add this CSS



.container.dynamic{ display: table-caption; }

Fiddle Link

+2


source






More articles:


All Articles