Width of a container not automatically adjusting based on content inside

Question

I have a div inside which I have content. I gave width = auto and then gave max-width but the container is taking up a constant fixed no matter what the size of the content is:

.adjustablebox {
  background: white;
  height: 50px;
  width: auto;
  overflow: hidden;
  padding: 8px;
  max-width: 350px;
  border-radius: 5px;
  position: relative;
  top: 0;
  left: 30%;
}

.body {
  background: black;
}

<div class="body">
  <div class="adjustablebox">
    <span>Hello world</span>
  </div>
</div>

Block-level elements (like `
` elements) take up as much width as they can by default. If you want them to take up only as much width as their contents, set them to `display: inline-block;`. — Sean, Mar 15 '22 at 14:20

score 1 · Accepted Answer · answered Mar 15 '22 at 14:20

div is an block element. its default behaviour is covering full width so its doing that but as you have given property of max-width so its just expanding to that limit. in order to do your stuff you have to change its behaviour to

display: inline-block;

score 1 · Answer 2 · answered Mar 15 '22 at 14:34

1

the .adjustablebox div is block level, it takes the entire available width of the container.

If you want it to be auto width you can do

    .adjustablebox {
       display: inline-block;
}

or use flex box.

answered Mar 15 '22 at 14:34

zer0day

236
1
3
11

score 0 · Answer 3 · answered Mar 15 '22 at 14:27

instead of using auto, use 100% and remove max-width.
Also you can remove both tag

.body {
      background: black;
    }

.adjustablebox {
      background: white;
      height: 50px;
      width: 100%;
      overflow: hidden;
      padding: 8px;
      border-radius: 5px;
      position: relative;
      top: 0;
      left: 30%;
    }
    

<div class="body"> 
<div class="adjustablebox">
    <span>Hello world</span>
    </div>
</div>

hope this will solve your problem.

Width of a container not automatically adjusting based on content inside

3 Answers3