CODEWITHSUNDEEP
htmlcss
Kermit the Hermit
Kermit the Hermit

Reputation: 379

Make fieldset fit its enclosing div

The code:

The HTML

<div>
    <fieldset>
        aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
    </fieldset>
</div>

The CSS

div {
    width: 200px;
    height: 100px;
}

The Problem: The fieldset does not fit the div

How do I go about having the fieldset not exceed the size of the div?

For instance if I set the size of the div with CSS, it makes no difference as to how much space the fieldset will occupy.

How to go about this?

EDIT

I would like to have two options to solve this:

one, having scroll functionality in the div

and two, having the text break up in to a new line inside the fieldset.

Upvotes: 0

Views: 2211

Answers (4)

IMI
IMI

Reputation: 2469

You just need word-break: break-all; on your container or fieldset element.

Edited: Added overflow: auto; to container element so it scrolls since it has a fixed height.

div {
  height: 100px;
  width: 200px;
  overflow: auto;
}

fieldset {
  word-break: break-all;
}
<div>
    <fieldset>
        aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
    </fieldset>
</div>

Upvotes: 1

Thi Tran
Thi Tran

Reputation: 701

Try this css code:

div {
    word-break: break-all;
}

Fix this issue:

div {
    height: 100px;
    width: 100px;
    word-break: break-all;
    overflow-y: auto;
}
<div>
    <fieldset> 
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
    </fieldset>
</div>

Upvotes: 5

POZ
POZ

Reputation: 591

The problem you are experiencing here is due to the fact that your test string "aaa" does not contain spaces so is not broken with line returns so the fieldset width is expanded.

Idealy you should test your layout with words such as "lorem ipsum" templates.

Upvotes: 0

Adam Jenkins
Adam Jenkins

Reputation: 55623

If you do not want the fieldset to exceed the fixed size of it's parent, then you'll have to allow it to have scrollbars:

div { width: 200px; height: 100px; }
fieldset { width: 100%; height: 100%; overflow: auto; }

Upvotes: 0

Related Questions