Почему divs с процентной шириной заставляют встроенный блок шириной 100%?

Question

У меня есть простой набор карт, которые показывают бок о бок изображения, которые мне нужно реагировать на ширину экрана. Таким образом, используя простой inline-block, у меня есть эта структура:

<div class="cards" id="ex1"> 
    <div class="card"> 
    <img src="http://www.clker.com/cliparts/5/b/a/7/1194986784455829849basebalm_ganson.svg.med.png" /> 
    </div> 
    <div class="card"> 
    <img src="http://www.clker.com/cliparts/d/1/4/6/11971185311926706097Gioppino_Basketball.svg.med.png" /> 
    </div> 
</div> 

С помощью этого CSS:

.cards { 
    display: inline-block; 
    border: 2px solid #808080; 
    border-radius: 2px; 
    padding: 10px; 
    margin-bottom: 20px; 
} 

#ex1 .card { 
    width: 35%; 
    display: inline-block; 
} 

Но к моему удивлению, родительский DIV, .cards, перекрывает ширину страницы, как если бы это было display: block :

Однако, если я жестко кода, ширины .card дивы, я t работает должным образом. Вот fiddle, который сравнивает эти два.

Почему inline-block не соответствует процентам, которые не составляют до 100%? Есть ли способ сделать это с процентами? (Я мог бы сделать их как 50%, но даже с box-sizing: border-box это может привести к их стеку по вертикали.)

Answer 1

.cards имеет ширину усадки. Это означает, что он будет стремиться быть настолько широким, насколько хочет содержимое (предположим, что достаточно места).

Однако содержание имеет процентную ширину, которая зависит от .cards.

Круговое определение решается следующим образом:

1. Процент содержания рассматриваются как auto

   То есть, изображения имеют свою внутреннюю ширину, которая является 300px.

2. .cards имеет размер в соответствии с содержимым, которые больше не зависят от .cards

   То есть, она становится 300px + 300px = 600px в ширину. ^{_{Ну, на самом деле немного больше, потому что у вас есть место в HTML, см. How to remove the space between inline-block elements?, чтобы избежать этого, но давайте проигнорируем это.}}

3. Содержимое имеют такие размеры снова, теперь принимая во внимание проценты, которые разрешены относительно ширины .cards из предыдущего шага.

   Т.е. изображения становятся 35% * 600px = 210px широкоформатными.

Answer 2

inline-block свойство занимает 100% пространства, сохраняя при этом свойство быть inline. Однако, когда одна строка на видимом внешнем виде вот-вот переполнится, встроенное свойство переходит в другую строку.

Например:

element { 
    display: inline; /* Makes the content go on the same line*/ 
} 
element { 
    display: inline-block; /* Makes the content go on the same line while not overflowing 
          and going on a different line while about to overflow*/ 
} 
element { 
    display: block; /* Makes the content go on different lines*/ 
} 

Я надеюсь, вы понимаете, что я имею в виду.