How to Make a Div Not Larger Than Its Contents

How to make div width only to fit its content and the next div to fill the remainder?

you should put

The float causes the element to occupy only its content

The overflow: hidden; causes the next content to occupy the remaining space

.InputDivTitle{
  float: left;
}
.InputDiv{
  position: relative;
  overflow: hidden;
}

see JSFiddle

Div is larger than its contents

you should write as below

The line-height property defines the amount of space above and below inline elements.

div.dataTables_paginate ul.pagination {
    margin: 2px 0;
    white-space: nowrap;
    line-height: 10px;
}

Make div not affect other div's size

Change the inner div into a span that is display: inline-block;. And move the styles of the outer div to the span. You can leave the margin.

<img src="/images/phatdeptrai.jpg" style="width: 28px;border-radius: 50%;float: left;clear: both;margin-left: 7px;margin-right: 7px;position: relative;top: 38px;">
<div style="float: left;max-width: 45%;">
<div style="font-size: .6875rem;color: #65676b;margin-left: 13px;margin-top: 10px;">Hoàng Phát đẹp trai</div>
<div style="margin-top: 2px;">
    <span style="display: inline-block; padding: 7px 10px 7px 10px; color: black; background-color: #e4e6eb;border-radius: 20px;"> sas</span>
</div>

How can I make a div grow to fit its content, up to the max size of the parent container?

You can add flex to the modal, so that the content will not expand out of its parent (modal in this example):

.modal {
    max-height: 70%;
    border: 5px dashed green;
    border-radius: 5px;
    display: flex; /* Add this flex */
}

---

Related Topics