Applying background to flex children does not work properly

Question

I have following code

.parent {
  display: flex;
  width: 100%;
  flex-direction: column;
  overflow-x: auto;
}
.child {
  display: flex;
  flex-flow: row nowrap;
  background: red;
}
.grand-child {
  flex-shrink: 0;
  display: block;
  align-items: center;
  padding: .54rem 1.05rem;
  width: 300px;
  height: 100px;
  overflow-x: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

<div class="parent">
  <div class="child">
    <div class="grand-child">a</div>
    <div class="grand-child">b</div>
    <div class="grand-child">c</div>
    <div class="grand-child">d</div>
  </div>
</div>

DEMO

Problem: When a background is applied to the class .children, the background is not overflowed content (When scrolling through x axis). I want to keep the scrollability as it is while applying the background only to .children class. If that is not possible what is the reason?

I had this question while answering This. Though I managed to provide a fix for the issue this specific problem still remains

please explain the question well...what is the output you would like to have? — ADH - THE TECHIE GUY, Jul 15 '18 at 07:00
Hi @DreamHunter Please run the snippet and scroll through x-axis you will see the red background is not covering the whole `.children` div. I want to know why — Sam C., Jul 15 '18 at 07:46

ADH - THE TECHIE GUY · Answer 1 · 2018-07-15T08:45:03.647

1

it just because of the flex-shrink: 0; property on your grand-child class.please remove that if you want to align your all grand-childs inside the child class.

.parent {
  display: flex;
  width: 100%;
  flex-direction: column;
  overflow-x: auto;
}
.child {
  display: flex;
  flex-flow: row nowrap;
  background: red;
  width:1200px;
}
.grand-child {
  /*flex-shrink: 0;*/
  display: block;
  align-items: center;
  padding: .54rem 1.05rem;
  width: 300px;
  height: 100px;
  overflow-x: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

<div class="parent">
  <div class="child">
    <div class="grand-child">a</div>
    <div class="grand-child">b</div>
    <div class="grand-child">c</div>
    <div class="grand-child">d</div>
  </div>
</div>

edited Jul 15 '18 at 08:45

answered Jul 15 '18 at 07:51

ADH - THE TECHIE GUY

4,125
3
31
54

Thanks for the answer, I want to keep scrolling as it is and apply the background too, is it possible? – Sam C. Jul 15 '18 at 07:56
yes it's,but for that you need to give the exact width to your parent element (child),i'm edited the snippet according with your criteria..hopes it will help you. – ADH - THE TECHIE GUY Jul 15 '18 at 08:46
300px x 4 (grand-childs total width) =1200px – ADH - THE TECHIE GUY Jul 15 '18 at 08:47

score 0 · Answer 2 · answered Jul 15 '18 at 07:53

0

let's check that code.

https://jsfiddle.net/2cuqL1f3/7/

css:

.child {
  background: red;
  width:100%;
  height:100px;
  overflow:scroll;
  white-space: nowrap;
}
.grand-child {

  display: inline-block;
  min-width: 300px;
  height: 100px;
  overflow-x: hidden;
}

answered Jul 15 '18 at 07:53

MarkFroog

21
1
2
3

Thanks for the answer Mark :) But this is not what i am expecting – Sam C. Jul 15 '18 at 08:00

Applying background to flex children does not work properly

2 Answers2