Расширить содержимое до полной ширины родителя

Question

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

https://jsfiddle.net/tiranium/e8w22j39/

HTML

<div class="ficha_container"> 
    <div class="ficha_row"> 
    <div class="ficha_cell"> 
     <h1>Title</h1> 
     <p>Content.</p> 
    </div> 
    </div> 
</div> 

CSS

.ficha_container { 
    display: table; 
    background-color: green; 
    box-sizing: border-box; 
    overflow: hidden; 
    display: block; 
} 
.ficha_row { 
    display: table-row; 
} 
.ficha_cell { 
    display: table-cell; 
} 
.ficha_cell p { 
    background: pink; 
} 

Answer 1

Предполагая, что вы хотите display:table решение, вы не можете добавить display: block к одному элементу.

Мое предположение, почему вы это сделали, должны были сделать его полной шириной.

Чтобы сделать полную ширину table вы просто установите его на 100%, так, чтобы сделать существующую работу разметки правильно, удалите display: block из .ficha_container и добавить width: 100%;

.ficha_container{ 
 
    display:table; 
 
    background-color: green; 
 
    box-sizing: border-box; 
 
    width: 100%; 
 
} 
 
.ficha_row{ 
 
    display:table-row; 
 
} 
 
.ficha_cell{ 
 
    display: table-cell; 
 
} 
 
.ficha_cell p{ 
 
    background: pink; 
 
}

<div class="ficha_container"> 
 
    <div class="ficha_row"> 
 
    <div class="ficha_cell"> 
 
     <h1>Title</h1> 
 
     <p>Content.</p> 
 

 

 
    </div> 
 
    </div> 
 
</div>