Not expected shrink behaviour of a flex div

[Kare]

We are experiencing an issue with Appfarm.

We want a container to shrink, but due to having different containers and visibility rules, a minimum width of 474,43 pixels is being set by default for some reason. Initially, when loading the view, the container appears at the correct size, but quickly later it changes to this minimum width.

We are unsure why this is happening and if there are any limitations we should be aware of.

this is the element:

<div id="Toolbar" class="jss201 cHF7dFZ">
   <div id="Surface container" class="jss201 caKmEGy c2">
      <div id="Content" class="jss201 cF71Qx6">
         <div id="Toolbar core" class="jss201 cfVpj28">
            <div id="90Twba" class="jss201 c90Twba">
               <div class="MuiButtonBase-root jss202 ckCbbzQ jss203" tabindex="0" role="button" aria-disabled="false" id="kCbbzQ">
                  <div id="XWxOoG" class="jss201 cXWxOoG">
                     <div id="YeAA23" class="jss201 cYeAA23">
                        <div id="SnXj2Z" class="jss201 cSnXj2Z">
                           <div id="SEjfaT" class="jss201 cSEjfaT"><span class="material-icons MuiIcon-root jss208 mdi mdi-label-outline cTksjfG" aria-hidden="true" style="font-size: 18px;"></span></div>
                           <span class="MuiTypography-root jss211 cTyf5AE MuiTypography-button MuiTypography-displayBlock">Label filters</span>
                        </div>
                     </div>
                  </div>
                  <span class="MuiTouchRipple-root"></span>
               </div>
            </div>
         </div>
         <div id="View labels" class="jss201 cFwUTUK">
            <div class="MuiCollapse-root MuiCollapse-hidden" style="min-height: 0px;">
               <div class="MuiCollapse-wrapper">
                  <div class="MuiCollapse-wrapperInner">
                     <div id="PWlg2j" class="jss201 cPWlg2j">
                        <div id="na1ccc" class="jss201 cna1ccc">
                           <div id="0kjgWt" class="jss201 c0kjgWt">
                              <p class="MuiTypography-root jss211 cAwhAhs MuiTypography-body1 MuiTypography-displayBlock">Create labels and add them to your emissions to organise your views.</p>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>

Hope someone can help
Kåre // MoreScope

[kristian]

Hello!

What are the settings of the parent container? It might affect the behaviour of its child (the shrink-container). This is not my strongest area, but Shrink means “Shrink if needed”, the opposite of “No-shrink” where the content of the container may exceed the with of its parent.

But if the parent container has center alignment of the content, you get this behaviour.

[Kare]

Hi Kristian, thanks for quick response!

It sounds like what we want as desired outcome is that Shrink means “Shrink if possible”. The parent is also flex, and flex children centered.

As I was working on this response and coming with a more detailed description, we managed to achieve what we wanted!

Our “toolbar” here should minimise when not interacted with, and maximise in width when user clicks on it, where we have different panels and buttons inside once opened, where we use “conditional styles” to change between stretch and shrink. What we have been trying, is to create the “minimised” state as the “default” state, and then set it to stretch when interacted with. We tried now to just do the opposite, make it stretch as default and set a logic for when to shrink. The trigger for shrink is now the default when view are loaded - and that worked!

TLDR: Same logic, just flipped the states, to make the div stretch as default, and rather a trigger for shrink, and then set the shrink value as “default”.