3

I want to add a CSS container query container for my 2nd child in my flexbox where both children are spaced out using space-between but it is not working. My second child goes off-screen and when I inspect the size of the div.container it says 0px width. What am I doing wrong here?

Here is my code:

body {
  background: #2b2e36;
  color: white;
  font-size: 20px;
}

.container {
  container-type: inline-size;
  background-color: green;
}

.parent {
  width: 100%;
  display: flex;
  justify-content: space-between;
  background: #ffff0061;
}

.child {
  background-color: #ff000091;
}
<div class="parent">
  <div class="child">
    <div>First</div>
  </div>

  <div class="container">
    <div>Second</div>
  </div>
</div>

Here is a working fiddle: https://jsfiddle.net/kpx6gvn9/

enter image description here

Pete
  • 57,112
  • 28
  • 117
  • 166
Martin Zeltin
  • 2,496
  • 3
  • 18
  • 36
  • container-type: inline-size; change it into this display: inline-size; – Nisha Jan 26 '23 at 09:41
  • @Nisha what? no I want it to be a css container so I need `container-type` – Martin Zeltin Jan 26 '23 at 09:42
  • @Pete sorry about that, updated the question. – Martin Zeltin Jan 26 '23 at 09:52
  • Did you see in fiddle it's saying unbexpected unknown property – Nisha Jan 26 '23 at 09:56
  • @Nisha that is because JSFiddle is not yet updated to the latest CSS spec. It is a valid property. – Martin Zeltin Jan 26 '23 at 10:18
  • I guess `container-type: inline-size;` this is causing the undefined behaviour , try commenting this out and see if the problem still exists – krishnaacharyaa Jan 26 '23 at 10:32
  • @KrishnaAcharya I know that much but I need to use CSS container queries that is why that property is there. – Martin Zeltin Jan 26 '23 at 10:39
  • 1
    From https://drafts.csswg.org/css-contain-3/ section 3.1 this behaves exactly as intended: "Giving an element inline-size containment applies size containment to the inline-axis sizing of its principal box. This means the inline-axis intrinsic sizes of the principal box are determined as if the element had no content." – galaxy Apr 17 '23 at 05:59

1 Answers1

0

I've run into problems with using container-queries inside flex.

For example: This CodePen by OddBird runs fine with the container inside grid:

.spread {
    display: grid;
    grid-template-columns: minmax(50%, 1fr) minmax(min-content, 20em);
    gap: 2rem;
}

But when I fork it and change from grid to flex, it breaks in firefox and chrome: CodePen

.spread {
    display: flex;
    gap: 2rem;
}

To fix it, I had to add some sizing information to the section, for example with:

.spread section {
    flex: 1;
}

I found this solution in Stephanie Eckles article.

bjelli
  • 9,752
  • 4
  • 35
  • 50