Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Shrinkwrap div to wrapped content

Tags:

html

css

I'm trying to size a container div according to its children, which can wrap onto multiple lines. If the children (blue boxes) do wrap, the container's width is 100% (black border, below). I'd like to avoid this, and set the container to the maximum width of any of its children.

.container {
  border: 1px solid black;
  width: fit-content;
}
.child {
  width: 500px;
  height: 70px;
  background-color: blue;
  display: inline-block;
  margin: 5px;
}
<div class="container">
  <div class="child"></div>
  <div class="child"></div>
</div>

Can anyone help? I'm aware this can be done with javascript, but I'd prefer a css-only solution as it seems so simple. Thanks!

Update: This is a snippet showing how it should look, but it in this case it prevents the .child divs from appearing inline (which I want to allow when there's room):

.container {
  border: 1px solid black;
  width: min-content;
}
.child {
  width: 500px;
  height: 70px;
  background-color: blue;
  display: inline-block;
  margin: 5px;
}
<div class="container">
  <div class="child"></div>
  <div class="child"></div>
</div>
like image 483
phildrip Avatar asked Nov 08 '22 13:11

phildrip


1 Answers

you can try using on the container element

.container {
    border: 1px solid black;
    display: inline-block;
    width: min-content;
}
like image 99
Derek Bess Avatar answered Nov 15 '22 05:11

Derek Bess