Сделать максимальную ширину CSS больше родительской - PullRequest
Новая
       9

Сделать максимальную ширину CSS больше родительской

4 голосов
/ 21 мая 2019

https://jsfiddle.net/d3yns9b6/ показывает, как max-width не работает, когда я хочу установить для него нечто большее, чем содержащий элемент.

Поскольку он абсолютно позиционирован, он должен иметь возможность выходить за пределысодержащий элемент.Если я установлю точное значение, используя width, это сработает, но тогда оба фрагмента текста в примере будут точно такой же ширины.

Я хочу, чтобы они оба заняли такой же небольшой ширины , как и онинужно, до максимального установленного мною количества (, даже если оно превышает родительский контейнер). 

.out {
  position: relative;
  width: 200px;
  height: 400px;
  background-color: blue;
}

.in {
  position: absolute;
  max-width: 600px;
  background-color: yellow;
}
<div class="out">
  <div class="in">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam commodi saepe, magnam aliquid quisquam cum ex corrupti sequi aut eius harum animi vitae, exercitationem eaque tempore culpa at itaque explicabo.
  </div>
  <div class="in" style="margin-top:300px">
    Lorem
  </div>
</div>

Ответы [ 3 ]

3 голосов
/ 21 мая 2019

Хорошо, если width не предоставлено, оно вернется к auto, что означает, что он будет использовать ширину, заданную родительским элементом, независимо от абсолютного позиционирования или любого max-width. Поэтому вам нужно указать любую ширину, используя проценты или относительные единицы, такие как vh или vw. 

.out {
  position: relative;
  width: 200px;
  height: 400px;
  background-color: blue;
}

.in {
  position: absolute;
  width: 500%;
  max-width: 600px;
}

.in > span {
  background-color: yellow;
  display: inline-block;
}
<div class="out">
  <div class="in">
    <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam commodi saepe, magnam aliquid quisquam cum ex corrupti sequi aut eius harum animi vitae, exercitationem eaque tempore culpa at itaque explicabo.</span>
  </div>
  <div class="in" style="margin-top:300px">
    <span>Lorem</span>
  </div>
</div>
1 голос
/ 22 мая 2019

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

ширина усадки: min(max(preferred minimum width, available width), preferred width). исх

Одна идея состоит в том, чтобы увеличить доступную ширину за счет увеличения отступа, поскольку абсолютный элемент учитывает поле дополнения, тогда вы можете применить отрицательное поле для компенсации добавленного дополнения. 

.out {
  position: relative;
  width: 200px;
  padding-right:400px; /*width + padding = 600px (equal to max-width)*/
  margin-right:-400px;
  height: 400px;
  background-color: blue;
  background-clip:content-box; /* We don't show the background on the padding*/
}

.in {
  position: absolute;
  max-width: 600px;
  background-color: yellow;
}
<div class="out">
  <div class="in">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam commodi saepe, magnam aliquid quisquam cum ex corrupti sequi aut eius harum animi vitae, exercitationem eaque tempore culpa at itaque explicabo.
  </div>
  <div class="in" style="margin-top:300px">
    Lorem
  </div>
</div>

В этом случае заполнение на самом деле не нужно, поскольку это блочный элемент, но может быть полезно при работе со встроенными элементами.

Пример: 

.out {
  position: relative;
  display:inline-block;
  width: 200px;
  padding-right:400px; /*width + padding = 600px (equal to max-width)*/
  margin-right:-400px;
  height: 300px;
  background-color: blue;
  background-clip:content-box; /* We don't show the background on the padding*/
}

.in {
  position: absolute;
  max-width: 600px;
  background-color: yellow;
}

.extra {
  display:inline-block;
  background:red;
  vertical-align:top;
  margin-top:100px;
}
<div class="out">
  <div class="in">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam commodi saepe, magnam aliquid quisquam cum ex corrupti sequi aut eius harum animi vitae, exercitationem eaque tempore culpa at itaque explicabo.
  </div>
  <div class="in" style="margin-top:200px">
    Lorem
  </div>
</div>
<div class="extra">
  some content here 
</div>
1 голос
/ 21 мая 2019

Вам нужно установить ширину с помощью width и ограничить ее с помощью max-width.

Примерно так: 

.in {
  position: absolute;
  width: 100vw;
  max-width: 600px;
  background-color: yellow;
}
...