Могу ли я иметь процентную ширину для дочернего элемента div с белым пространством: nowrap

Question

Какой зеленый фон перейти на полную ширину, если я изменю процентную ширину элемента на px, он будет работать!

Но мне нужно, чтобы оно было в процентах.

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

.frame { 
 
    overflow-x: scroll; 
 
} 
 

 
.pane { 
 
    white-space: nowrap; 
 
    display: inline-block; 
 
    background:green; 
 
} 
 

 
.item { 
 
    display: inline-block; 
 
    width: 18%; 
 
    height: 50px; 
 
    background-color: grey; 
 
}

<div class="frame"> 
 
    <div class="pane"> 
 
     <div class="item project-col"></div> 
 
     <div class="item project-col"></div> 
 
     <div class="item project-col"></div> 
 
     <div class="item project-col"></div> 
 
     <div class="item project-col"></div> 
 
     <div class="item project-col"></div> 
 
     <div class="item project-col"></div> 
 
     <div class="item project-col"></div> 
 
     <div class="item project-col"></div> 
 
     <div class="item project-col"></div> 
 
     <div class="item project-col"></div> 
 
     <div class="item project-col"></div>    
 
    </div> 
 
</div>

Answer 1

Рассмотрите использование ширины и высоты окна проекции видового экрана вместо процентов

проверить этот фрагмент

.frame { 
 
    overflow-x: scroll; 
 
} 
 

 
.pane { 
 
    white-space: nowrap; 
 
    display: inline-block; 
 
    background:green; 
 
} 
 

 
.item { 
 
    display: inline-block; 
 
    width: 18vw; 
 
    height: 50px; 
 
    background-color: grey; 
 
}

<div class="frame"> 
 
    <div class="pane"> 
 
     <div class="item project-col"></div> 
 
     <div class="item project-col"></div> 
 
     <div class="item project-col"></div> 
 
     <div class="item project-col"></div> 
 
     <div class="item project-col"></div> 
 
     <div class="item project-col"></div> 
 
     <div class="item project-col"></div> 
 
     <div class="item project-col"></div> 
 
     <div class="item project-col"></div> 
 
     <div class="item project-col"></div> 
 
     <div class="item project-col"></div> 
 
     <div class="item project-col"></div>    
 
    </div> 
 
</div>

Надеюсь, это поможет

Answer 2

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

Из того, что я вижу, вы хотите использовать контейнер с горизонтальной прокруткой, основанный на том, что у вас есть overflow-x: scroll.

Вы не можете использовать white-space: nowrap;, display: inline-block; и width: 18%; все вместе. Когда элемент отображается встроенным или встроенным блоком, его ширина определяется его дочерними элементами, а элементы с процентной шириной получают их ширину от родителя. По сути, вы говорите, что родительу нужна ширина детей, чтобы определить его размер, и чтобы дети нуждались в ширине родителя, чтобы определить их размер. Это не имеет смысла - вы не можете решить для x = y + z;, если вы не знаете, что и y, и z есть. Эти свойства противоречат друг другу. То, что вы хотите сделать, не может быть выполнено с помощью свойств, которые вы пытаетесь использовать.

Чтобы достичь того, чего вы хотите, вы должны установить .item иметь display: block; float: left; и ширину до размера фиксированной единицы (например пикселей), а также установить прямой родитель (.pane) свойство ширины быть следующее уравнение:

width = (.item width + horizontal margins) * item count 

Таким образом, по существу, ширина этого количества элементов, которые умножаются на расчетной ширину элемента (который в данном примере Codepen при условии, является 102px из-за горизонтальные края), а затем умножить ширину элемента самыми количество элементов (так 10).

В моем примере я включил ширину панели, жестко закодированную в CSS, чтобы вы увидели, что происходит, а также ширину панели, рассчитанную с помощью jQuery (для элемента с классом .pane-calculated). Вы можете вычислить эту клиентскую сторону, как я, или серверную, и добавить значение как встроенный стиль.

Так если у вас есть следующий HTML:

<div class="frame"> 
    <div class="pane"> 
     <div class="item project-col"></div> 
     <div class="item project-col"></div> 
     <div class="item project-col"></div> 
     <div class="item project-col"></div> 
     <div class="item project-col"></div> 
     <div class="item project-col"></div> 
     <div class="item project-col"></div> 
     <div class="item project-col"></div> 
     <div class="item project-col"></div> 
     <div class="item project-col"></div>  
    </div> 
</div> 

Вам нужно будет следующий CSS:

.frame { 
    overflow-x: scroll; 
    width: 500px; /* this can be any width */ 
    border: 3px solid deeppink; 
} 

/* 
    pane width = item count * (item width + horizontal margins) 
*/ 
.pane { 
    width: 1020px; /* 102 * 10 */ 
} 

.item { 
    display: block; 
    float: left; 
    width: 100px; /* calculated width is 102px b/c of margin-right */ 
    margin: 0 2px 2px 0; 
    height: 50px; 
    background-color: grey; 
} 

ВИДЕТЬ Codepen: http://codepen.io/tinacious/pen/NbMaKJ?editors=1111