1

I am trying to use flexbox to create a horizontal layout for a mix of div and svg elements. The red and yellow (svg) boxes are pushed out of visibility when the width of the green box is increased sufficiently. However, if I wrap them in a div this doesn't happen. Why is this?

.container {
  display: flex;
  overflow-x: auto;
  white-space: nowrap;
}
<div class="container">
  <svg width="100px">
    <rect width="100" height="100" fill="red" />
  </svg>
  <div>
    <svg width="1200px">
      <rect width="100" height="100" fill="green" />
    </svg>
  </div>
  <svg width="100px">
    <rect width="100" height="100" fill="yellow" />
  </svg>
</div>
Viktor Mukhachev
  • 433
  • 4
  • 9
Max888
  • 3,089
  • 24
  • 55
  • when adding the div you add a new constraint the disable the element to shrink past its content. Add `min-width:0` to the div and it will work the same without – Temani Afif Feb 03 '20 at 18:01
  • @TemaniAfif I assume you mean "Add `min-width: 0` to the div with class container". However I tried this and it did not fix the problem. I did manage to fix the problem by adding `min-width: 100px` to the svg. However, this is not the solution provided in the duplicate question you linked. Please can you provide an example and explanation, or reopen? – Max888 Feb 03 '20 at 20:05
  • if you add min-width:0 to the div you will notice that it will now shrink and the SVG inside will overflow: https://jsfiddle.net/g0n728j9/ ... now by adding min-width:100px to the other SVG you confirm the min-width contraint because with this you will prevent the element from shrinking. in addition to min-width:100px you can also consider flex-shrink:0 to avoid the element from shrinking: https://jsfiddle.net/g0n728j9/1/ but you still need min-width:0 to allow the div to shrink. So you have to consider the min-width contraint (first duplicate) and the flex-shrink (I will add another duplicate – Temani Afif Feb 03 '20 at 20:12
  • So by default an element will shrink to not overflow the parent container BUT cannot shrink past its content size. You control the shrink effect using flex-shrink and the *cannot shrink past its content size* with min-width – Temani Afif Feb 03 '20 at 20:14
  • Faced the same. For me wrapping the `svg` inside a `div` did the trick! – oae Apr 08 '21 at 07:16

1 Answers1

0

It may be, there is something with the min-width computation. Seems, the CSS Flexbox speficiation is saying to resolve the min-width: auto of a flex item to a "min-content". And the around has a minimum width, while simple "" has no.

I would add flex-shrink: 0; or something else to make it more "simple".

Viktor Mukhachev
  • 433
  • 4
  • 9