Question 43281 in Html Question posted in
Some basic documentation can be found here.

CSS stop children overflowing parent in grid scroll – Html

I have a root container that is 100% width and height. The root container is overflow-x:scroll.

Inside the root container is another container which has n number of fixed width elements. The container is display:grid with grid-auto-flow:column

The problem I have is that the container does not expand to fill the width of its children elements. This is evident when setting a background to the container. When the root container scrolls, the containers background cuts off.

You can see this clearly in the following codepen.
https://codepen.io/ozzyg/pen/YzObrqM

How would I get the container to be the width of its children?

Tags:

2

Answers


  1. 0

    I’m trying to decipher what your asking based on your question without specifics. If you could add in some class names your referring to it would help, but I think what you want is the following.

    declare the width of your .kalendar-dates container. I would use

    .kalendar-dates{width:fit-content}
    Login or Signup to reply.
  2. 0

    Add display: flex; to .kalendar:

    * {
  box-sizing:border-box;
}

html, body {
  margin:0; padding:0;
  width:100%;
  height:100%;
}

.kalendar {
  display: flex; /* 👈 */
  width:100%;
  height:100%;
  overflow-x: scroll;
  background-image: linear-gradient(45deg, #ffffff 25%, #e3f8ff 25%, #e3f8ff 50%, #ffffff 50%, #ffffff 75%, #e3f8ff 75%, #e3f8ff 100%);
  background-size: 56.57px 56.57px;
}

.kalendar-dates {
  height:100px;
  display: grid;
  grid-auto-flow: column;

  background-image: linear-gradient(135deg, #ffffff 25%, #f4e3ff 25%, #f4e3ff 50%, #ffffff 50%, #ffffff 75%, #f4e3ff 75%, #f4e3ff 100%);
  background-size: 56.57px 56.57px;
}

.kalendar-column {
  width:100px;
  height: 100%;
  float: left;

  background-image: linear-gradient(17deg, #ffffff00 25%, #cba8e3 25%, #cba8e3 50%, #ffffff00 50%, #ffffff00 75%, #cba8e3 75%, #cba8e3 100%);
  background-size: 136.81px 41.83px;
}
    <div class="kalendar"><div class="kalendar-dates"><div class="kalendar-column"></div><div class="kalendar-column"></div><div class="kalendar-column"></div><div class="kalendar-column"></div><div class="kalendar-column"></div><div class="kalendar-column"></div><div class="kalendar-column"></div><div class="kalendar-column"></div><div class="kalendar-column"></div><div class="kalendar-column"></div><div class="kalendar-column"></div><div class="kalendar-column"></div><div class="kalendar-column"></div><div class="kalendar-column"></div><div class="kalendar-column"></div><div class="kalendar-column"></div><div class="kalendar-column"></div><div class="kalendar-column"></div><div class="kalendar-column"></div><div class="kalendar-column"></div><div class="kalendar-column"></div><div class="kalendar-column"></div><div class="kalendar-column"></div><div class="kalendar-column"></div><div class="kalendar-column"></div></div></div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search