0

I have a grid, which I'm using to have 2 elements overlap each-other (setting both to 1/1 grid location).

The grid div is set to max-width: 100%, and is working correctly. However, both items in the grid are not scaling down when the browser window scales down.

.container {
  display: grid;
  max-width: 100%;
}

.grid_item_1 {
  color: white;
  width: 1600px;
  height: auto;
  grid-area: 1 / 1;
  max-width: 100%;
  min-width: 0px;
}

.grid_item_2 {
  grid-area: 1/1;
  max-width: 100%;
}
<div class="container">
  <div class="grid_item_1">
    Foo
  </div>
  
  <img width="1600" class="grid_item_2" src="https://via.placeholder.com/1600">
</div>

tl;dr; the inner image (and additional div overlapping it) don't seem to be respecting max-width: 100% (they are using the width value of 1600). What am I missing? Thanks!

isherwood
  • 58,414
  • 16
  • 114
  • 157
Nathan
  • 73,987
  • 14
  • 40
  • 69
  • since when `div` tag is a self-closing tag? – monim Sep 06 '22 at 01:57
  • `maxWidth: "100%` should be `maxWidth: "100%"` in both divs as well as image tag – monim Sep 06 '22 at 02:02
  • I was just throwing this together as an example. In reality the first item is a MUI skeleton component, which becomes a span, but same idea. – Nathan Sep 06 '22 at 03:00
  • The end quote is there in my code, I just typed it here wrong. Fixed. – Nathan Sep 06 '22 at 03:01
  • Have a look at [this question and answer](https://stackoverflow.com/questions/43311943/prevent-content-from-expanding-grid-items) it may help? – Rylee Sep 06 '22 at 05:50
  • @Rylee thanks for the link, but unfortunately nothing in there seems to be helping me, I can't get the image to size down – Nathan Sep 06 '22 at 15:21
  • first change `` to `` and I tried your code it scales perfectly . this is a demo with the same code at [codesandbox](https://codesandbox.io/s/combobox-material-demo-forked-rgwswr?file=/demo.js) – monim Sep 06 '22 at 15:28
  • Seems to work https://jsbin.com/yitahirote/edit?html,css,output – Tom Sep 06 '22 at 16:03
  • @Tom see my codepen. I think each item is preventing the other item from resizing, since they both have 1600 width? Any help is appreciated, I'm pretty stuck rn. – Nathan Sep 07 '22 at 04:07
  • It works if I remove the first grid item, but the presence of the item seems to prevent the other item from resizing, strangely. – Nathan Sep 07 '22 at 04:13
  • If you remove the 1600px from grid_item_1, the image resizes properly. – Bman70 Sep 07 '22 at 05:04
  • I know, but why? I need that div to be 1600, and resize the same way as the image, as I'm using it as a placeholder while the image loads. I've since changed approaches, and am using relative positioning on the container with absolute positioned children, and I've given the div item an `aspect-ratio: 1600/400` so it resizes. This new pattern works. – Nathan Sep 07 '22 at 05:09
  • But I'd like to understand why the old pattern did not work. – Nathan Sep 07 '22 at 05:10
  • It seems quite strange that you're trying to give an element a specific width but also have it resize automatically. Since both elements are in the same grid area, the width will effect both. You could try setting the width to 100% instead of 1600px. If 1600px is the minimum, set that with `min-width`. – Rylee Sep 07 '22 at 06:00
  • At this point, I've switched to another solution that works, but I'd like to understand *why* my codepen isn't working. What is the underlying cause that's preventing resizing? Why does it work if I have one grid item, but not two? – Nathan Sep 07 '22 at 06:34
  • It seems that if grid_item1 is given `min-width: 1600px` instead of `width: 1600px` it no longer fights with the max-width, and resizes as you intended. Solved? Of course a clear idea of which declaration overrides the other is always nice. Not sure in this case. – Bman70 Sep 07 '22 at 19:13

0 Answers0