Как предотвратить расширение DIV по ширине?

Question

Как мне предотвратить расширение div по ширине?

Я бы хотел .dont-expand сделать вид, что width: 100%; означает "100%, но не считая себя". По сути, вычисляем width: 100%; (игнорируя себя) и устанавливая эту ширину в пикселях width: Npx; - в CSS, а не 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>

jsbin link

Answer 1

Попробуйте использовать

.outer {
  position: absolute;
  border: 1px solid black;
  width: min-content;
}

Это должно сделать так, чтобы ширина внешнего поля стала как можно меньше, без сжатия содержимого.

Answer 2

Похоже, что вы можете сделать элемент "видимым" как родительский элемент шириной 0, но при этом сделать его расширенным до ширины родительского элемента, выполнив: width: 0px; min-width: 100%.

Это кажется самым чистым, наиболее совместимое с браузером решение. Также не требуется изменять свойство display, что является плюсом.

 /* 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>

Answer 3

Вы можете передать свойство table-layout, чтобы уменьшить контейнер до ширины наименьшего содержимого.

Затем необходимо установить ширину .has-content, равную фактической ширине содержимого, с помощью * 1005. *

.dont-expand не требует ширины, он будет заключен в доступную доступную ширину, , если само слово или изображение не шире .has-width, это единственное знакомое мне поведение, которое я знаю из.

пример:

.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

Свойство table-layout CSS устанавливает алгоритм, используемый для из ячеек, строк и столбцов.

здесь нет ничего, кроме 1 столбца, так как дочерние элементы .outer не имеют сброса display. Идея состоит в том, чтобы только использовать собственные свойства сжатия / расширения алгоритма table-layout display в главной оболочке и не перестраивать визуальную таблицу HTML из div.

---

Поиграйте с этим поведением table-layout, чтобы ознакомиться с ним, и не думайте о каких-либо HTML табличных тегах, это только стиль CSS;)

Answer 4

Установите для свойства размера блока значение "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;
}