How do I prevent a div
from expanding in width?
I'd like .dont-expand
to pretend that width: 100%;
means "100%, but not counting myself". Basically, compute width: 100%;
(ignoring itself), and setting that width in pixels width: Npx;
-- in CSS and not JS.
.outer { position: absolute; border: 1px solid black; } /* This element sets the width of the container */ .has-width { width: 300px; margin-top: 10px; background: rgba(0,128,0,.2); border-right: 2px solid green; color: #888; } .dont-expand { /* width: ??? */ /* This would be nice */ /* expand: false; */ /* Or this */ /* width: toPx(100%); */ /* Or this */ /* width: calc(100% + 0px); */ }
<div class="outer"> <div class="dont-expand"> How do I get this text to wrap instead of growing the container? </div> <div class="has-width"> I should be setting the width of "container". </div> </div>
It looks like you can make an element "appear" as 0 width to its parent, but still have it expand to the parent's width by doing: width: 0px; min-width: 100%
width: 0px; min-width: 100%
.
This seems to be the cleanest, most browser-compatible solution. It also doesn't require changing the display
property, which is a plus.
/* Make it "shrink-to-fit", either inline-block, or position: absolute */ .outer { /* position: absolute; */ display: inline-block; border: 1px solid black; } /* This element sets the width of the container */ .has-width { width: 300px; margin-top: 10px; background: rgba(0,128,0,.2); border-right: 2px solid green; color: #888; } /* Appears as 0 width to parent, but then expands to fit. */ .dont-expand { width: 0px; min-width: 100%; }
<div class="outer"> <div class="dont-expand"> How do I get this text to wrap instead of growing the container? </div> <div class="has-width"> I should be setting the width of "container". </div> </div>
Try using
.outer {
position: absolute;
border: 1px solid black;
width: min-content;
}
This should make it so that the width of the outer box becomes as small as possible, while not squashing content.
You may relay on the the table-layout
property to shrink the container to the width of the smallest content.
You need then to set the width to .has-content
to its actual content's width via max-content
.dont-expand
requires no width, it will wrap inside the width avalaible, unless itself has a word or an image wider than .has-width
, that is the only side behavior i know of.
example:
.outer { position: absolute; border: 1px solid black; display: table; width: 0; } /* This element sets the width of the container */ .has-width { width: max-content; margin-top: 10px; background: rgba(0, 128, 0, .2); border-right: 2px solid green; color: #888; } .dont-expand { /* nothing needed here */ } .bis {bottom:0}
<div class="outer"> <div class="dont-expand"> How do I get this text to wrap instead of growing the container? </div> <div class="has-width"> I should be setting the width of "container". </div> </div> <div class="outer bis "> <div class="dont-expand"> How do I get this text to wrap instead of growing the container? </div> <div class="has-width"> i'm container's width ! </div> </div>
https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout
The table-layout CSS property sets the algorithm used to lay out cells, rows, and columns.
here , there's nothing else than 1 column since, children of .outer
do not have a display
reset . The idea is to only use the shrink/expand native properties of the table-layout display
algorithm on the main wrapper and not rebuild a visual HTML table from div.
Play with this table-layout
behavior to become familiar with it, and do not think about any HTML
table tag, it's only about CSS styling ;)
Set the box-sizing property to "border-box"
.dont-expand {
/* width: ?? */
/* This would be nice */
/* expand: false; */
/* Or this */
/* width: toPx(100%); */
/* Or this */
/* width: calc(100% + 0px); */
box-sizing: border-box;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.