CODEWITHSUNDEEP
css
user1031742
user1031742

Reputation: 424

expanding child to full width of parent inside overflow-x auto

How is it possible to stretch child div without setting fixed widths? Even if I try to wrap items and child in one wrapper div, the child div takes always 100%. Not full horizontal width. Thank you.

.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/

Upvotes: 2

Views: 1196

Answers (1)

user3733831
user3733831

Reputation: 2936

Try this:

.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>

This is more flexible CSS grid solution:

.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>

Upvotes: 1

Related Questions