Блог

Главная - Вопросы по программированию - расширение дочернего элемента до полной ширины родителя внутри переполнения-x автоматически

расширение дочернего элемента до полной ширины родителя внутри переполнения-x автоматически

#css

Вопрос:

Как можно растянуть дочерний div без установки фиксированной ширины? Даже если я попытаюсь завернуть предметы и ребенка в одну обертку div, дочерний div всегда занимает 100%. Не полная горизонтальная ширина. Спасибо.

 .parent {
  background: skyblue;
  width: 350px;
  overflow-x: auto;
  white-space: nowrap;
}

.child {
  background: springgreen;
  white-space: normal;
}

.item {
  width: 50%;
  background: red;
  display: inline-block;
} 
 <div class="parent">

  <div class="item">
    This is some v y erty erty erty
  </div>
  <div class="item">
    This is serty erty erty erty erty
  </div>
  <div class="item">
    This is somerty erty erty erty ert
  </div>

  <div class="child">
    This .child div should extend horizontaly
  </div>

</div>

https://jsfiddle.net/45b0ypcq/2/

Комментарии:

1. Я думаю, что то, что вы ищете, можно было бы решить с помощью flexbox, но все равно неясно, как вы хотите, чтобы выглядел ваш вывод. Не могли бы вы поделиться изображением того, чего вы ожидаете?

2. @MariaNirmal ПРИВЕТ, зеленый div должен расширяться до ширины синего div

Ответ №1:

Попробуйте это:

 .parent {
  background: skyblue;
  width: 350px;
  overflow-x: auto;
  display: flex;
  flex-wrap: wrap;
}

.parent div {
  flex: 0 33.333%;
}

.parent .child {
  background: springgreen;
  flex: 0 100%;
}

.item {
  background: red;
} 
 <div class="parent">

  <div class="item">
    This is some v y erty erty erty
  </div>
  <div class="item">
    This is serty erty erty erty erty
  </div>
  <div class="item">
    This is somerty erty erty erty ert
  </div>

  <div class="child">
    This .child div should extend horizontaly
  </div>

</div>

Это более гибкое CSS сетевое решение:

 .parent {
  background: skyblue;
  width: 350px;
  overflow-x: auto;
  white-space: nowrap;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  grid-gap: 5px;
  grid-template-areas: 
    "item1 item2 item3"
    "child child child";
}

.item1 {
  grid-area: item1;
}

.item2 {
  grid-area: item2;
}

.item3 {
  grid-area: item3;
}

.child {
  background: springgreen;
  grid-area: child;
}

.item {
  background: red;
} 
 <div class="parent">
  <div class="item item1">
    This is some v y erty erty erty
  </div>
  <div class="item item2">
    This is serty erty erty erty erty
  </div>
  <div class="item item3">
    This is somerty erty erty erty ert
  </div>

  <div class="child">
    This .child div should extend horizontaly
  </div>
</div>

Комментарии:

1. содержимое основного раздела должно быть переполнено. не упаковано внутри на одном экране.

Метки: