I have used container-type: inline-size; css Property to apply diff css when its element width got changes Like :

`.alert-container {
    container-type: inline-size;
  }
  @container (width <=320px) {
    .alert {
      border-radius: $u-8 !important;
    }
    .wideActionButtons {
      display: none !important;
    }}`

Here is the code snippet :

.alert-section[_ngcontent-rlf-c518] {
    margin-left: 15px;
    margin-right: 15px;
}
.justify-space-between {
    display: flex;
    justify-content: space-between;
}
.mt-2 {
    margin-top: 0.5rem !important;
}
.d-flex {
    display: flex !important;
}
dew-alert .alert-container {
    container-type: inline-size;
}
.alert {
background-color : yellow;
color: red;
}
.normal-text{
height: 45px;
background-color: #143D60;
color: #EB5B00;
}

<div class="d-flex mt-2 alert-section">
<div>
<dew-alert>
<div class="alert-container alert">
hi here is the content with container-type: inline-size style
</div>
</dew-alert>
</div>
<div class="d-flex justify-space-between normal-text">Hi this is normal content 
and this can have some more child also</div>
</div>

I have used container-type: inline-size; css Property to apply diff css when its element width got changes Like :

`.alert-container {
    container-type: inline-size;
  }
  @container (width <=320px) {
    .alert {
      border-radius: $u-8 !important;
    }
    .wideActionButtons {
      display: none !important;
    }}`

Here is the code snippet :

.alert-section[_ngcontent-rlf-c518] {
    margin-left: 15px;
    margin-right: 15px;
}
.justify-space-between {
    display: flex;
    justify-content: space-between;
}
.mt-2 {
    margin-top: 0.5rem !important;
}
.d-flex {
    display: flex !important;
}
dew-alert .alert-container {
    container-type: inline-size;
}
.alert {
background-color : yellow;
color: red;
}
.normal-text{
height: 45px;
background-color: #143D60;
color: #EB5B00;
}

<div class="d-flex mt-2 alert-section">
<div>
<dew-alert>
<div class="alert-container alert">
hi here is the content with container-type: inline-size style
</div>
</dew-alert>
</div>
<div class="d-flex justify-space-between normal-text">Hi this is normal content 
and this can have some more child also</div>
</div>

But when its parent element use flex property then the component breaks. its showing 0 width but showing height

Here is image : Breaking Alert Img

Since i can't /don't want to give this component fixed width. so have applied diff css property property but nothing work. I don't want to remove container-type: inline-size; because i haven't find alternative of this for adjust css of element and its child when its width or height change.

• @media query is working on viewport dimensions.

• html
• css

• Please edit your question to include a full example (ideally as a StackSnippet) with the html and css of all the involved elements: the container, its flexing parent, and its children that should depend on the container width. – Bergi Commented Mar 17 at 22:06
• "But when its parent element use flex property then the component breaks" - it seems like your actual issue is mainly with this flex layout. You need to give the alet-container element some base width and make it shrink or grow as desired. But with container-type: inline-size;, it won't have a default width based on its content afaik. – Bergi Commented Mar 17 at 22:08
• @Bergi have edit the query. i don't want to give it any fixed width, alert component is applied on diff component. it take width accordingly wherever it is used. – RavishVarma Commented Mar 18 at 9:55

2 Answers 2

This is an example. I hope it matches what you're looking for. If not, try creating a reproducible example of your issue.

Setting "flex-grow: 1" ensures that element takes up some inside the flex container and "min-width" prevents element from collapsing completely.

.parent {
  display: flex;
  gap: 10px;
  border: 2px solid red;
  padding: 10px;
}

.alert-container {
  container-type: inline-size;
  border: 2px solid blue;
  background: lightblue;
  padding: 10px;
  flex-grow: 1;
  min-width: 100px;
}

@container (width <=320px) {
  .alert {
    border-radius: 20px;
    background: pink;
  }
}

.alert {
  padding: 10px;
  background: yellow;
}

<div class="parent">
  <div class="alert-container">
    <div class="alert">Alert Box</div>
  </div>
</div>

There is a few things you could fix :

1. Make the parent of .alert be the container querie
2. Make dew-alert a block element
3. reset flex properties to direct child of alert-section.

Those fix should help a bit.

Updated snippet below to test through different browsers

.alert-section>* {
  flex: 1 1 1vw;
}

dew-alert {
  display: block;
  container-type: inline-size;
}

.alert {
  background-color: yellow;
  color: red;
}

.normal-text {
  background-color: #143d60;
  color: #eb5b00;
}

@container (width > 320px) {
  .alert-container.alert {
    border-radius: 1em;
    color: green;
  }

  .wideActionButtons {
    display: none !important;
  }
}

<link href="https://cdnjs.cloudflare/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="d-flex mt-2 alert-section">
  <div>
    <dew-alert>
      <div class="alert-container alert">
        hi here is the content within container-type: inline-size style
      </div>
    </dew-alert>
  </div>
  <div class="d-flex justify-space-between normal-text">Hi this is normal content
    and this can have some more child also</div>
</div>