CSS, когда линейный разрыв элементов строки, родительская оболочка не соответствует новой ширине

Как вы получаете элемент inline-block для соответствия его ширине содержимого, если линия содержимого прерывается из-за ширины экрана?

<!-- parent inline-block -->
<div style='display: inline-block;'>
    <div style='display: inline-block; width:200px;'></div>
    <!--
        If this child line breaks, 
        two 200px wide blocks are stacked vertically.
        That should make the parent width 200px,
        but the parent stays much wider than that
    -->
    <div style='display: inline-block; width:200px;'></div>
</div>

Я не могу придумать, как сформулировать вопрос так, чтобы он звучал легко, но я собрал простой JSFiddle, иллюстрирующий.

#wide {
  position: relative;
  width: 100%;
  border: 1px solid black;
  padding: 5px;
}
#narrow {
  position: relative;
  width: 175px;
  border: 1px solid black;
  padding: 5px;
}
.wrap {
  display: inline-block;
  border: 1px solid green;
  margin: auto;
}
.inlineblock {
  display: inline-block;
  vertical-align: top;
  background: red;
  min-width: 100px;
  min-height: 100px;
  border: 1px solid black;
}

<section id='wide'>
  <div class='wrap'>
    <div class='inlineblock'></div>
    <div class='inlineblock'></div>
  </div>
</section>
<p>
  When the red inline-blocks are forced to line break, how do you make a parent with display:inline-block (the green border) snap to fit? How do you get rid of all the extra horiztonal space in the lower green bordered div?
</p>
<section id='narrow'>
  <div class='wrap'>
    <div class='inlineblock'></div>
    <div class='inlineblock'></div>
  </div>
</section>

Ответы

Ответ 1

Ты не можешь По умолчанию элементы inline-block имеют ширину сжатия:

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

Затем,

Когда preferred minimum width <= preferred width <= available width, ширина будет preferred width, как вы пожелаете.
Когда available width <= preferred minimum width <= preferred width, ширина будет preferred minimum width, по вашему желанию.
Когда preferred minimum width <= available width <= preferred width, ширина будет available width, даже если она вам не нравится.

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

Ответ 2

элементы inline-block не могут достигнуть этого расположения - как продемонстрировано @Oriol - но,

CSS Grid может достичь этого макета.

body {
  margin: 0;
}

ul {
  display: inline-grid;
  grid-template-columns: repeat(auto-fit, 100px);
  min-width: 50vw;
  
  /* decorative properties */
  grid-gap: 10px;
  padding: 0;
  list-style: none;
  border: 5px solid salmon;
  box-sizing: border-box;
  
  /* center the grid */ 
  position: relative;
  left: 50vw;
  transform: translateX(-50%);
}
li {
  background-color: lightblue;
  height: 100px;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
  <li>11</li>
  <li>12</li>
  <li>13</li>
  <li>14</li>
  <li>15</li>
  <li>16</li>
  <li>17</li>
  <li>18</li>
  <li>19</li>
  <li>20</li>
  <li>21</li>
  <li>22</li>
</ul>

Ответ 3

Один из подходов, который я использовал, дает внешний вид родителя с выравниванием ширины дочернего содержимого:

Обернуть inline элемент в элемент inline-block или уровня block
Применить box-decoration-break: clone встроенный элемент. Примечание. В этом свойстве отсутствует поддержка IE/Edge.

От MDN:

CSS-свойство box-decor-break указывает, как следует отображать фрагменты элемента при разбивании на несколько строк, столбцов или страниц.

И немного о значении clone.

Каждый фрагмент блока отображается независимо с указанными рамкой, отступом и полем, обертывающим каждый фрагмент.

Без использования box-decoration-break: clone вы увидите на левом поле, как обрабатываются первые фрагменты текста после каждого переноса строки.

Хотя это правда, что с этим решением дополнительное пространство в родительском элементе все еще существует…

… Это решение хорошо для решения визуальной проблемы:

Вот оно в действии:

демонстрация

.outer {
  line-height: 1.4;
  padding: 2px 0;
  margin: 0.5em auto;
}

.outer>span {
  padding: 0.45rem;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  background-color: blue;
  color: white;
  font-size: 1.5em;
}

<div class="outer">
  <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti explicabo provident eaque qui, at facilis a, repudiandae</span>
</div>

<div class="outer">
  <span>Short text</span>
</div>