Полная ширина до ионных карт под ионным содержимым

Question

Мне нужно дать полную ширину ионной карте.Это работает:

ion-card{
        display: flex;
        flex-direction: column;
        width: 100% !important;
        margin: 0 !important;
      }

Но мне нужно ограничить это только для детей ion-content.Так попробовал это.Но это не работает.т.е. удаляет всю ширину карточек.Любая подсказка?

 ion-content>ion-card{
        display: flex;
        flex-direction: column;
        width: 100% !important;
        margin: 0 !important;
      }

html

<ion-header>
 <ion-card>
      <h2>Notifications Area1</h2>
  </ion-card>
</ion-header>

    <ion-content>
      <ion-card>
        <h2>Notifications Area2</h2>
      </ion-card>
    </ion-content>

Примечание: Мне не нужно применять полную ширину к ion-headerкарта.

Answer 1

Это будет ваше решение: удалите > и замените его на blank space.

Вот несколько объяснений, почему следует использовать blank space,

element element, <div> <p> Выбирает все <p> элементы внутри <div> элементов,

element> element <div> > <p> Выбирает все <p> элементы, родительские элементы которых являются<div> element

и в вашем случае пробел работает лучше.

ion-card{
        display: flex;
        flex-direction: column;
        margin: 0 !important;
        background: blue;
        width: 500px;
      }
ion-content{
  background: green;
}
ion-content ion-card{
  background: yellow!important;
  width: 100%;
}

<ion-content>
  <ion-card>
    <h2 text-center margin-top>Notifications Area</h2>
  </ion-card>
</ion-content>

<ion-card>
    <h2 text-center margin-top>Notifications Area</h2>
  </ion-card>

Answer 2

ion-content {

    ion-card {
        display: flex;
        flex-direction: column;
        width: 100% !important;
        max-widht : 100% !important;
        margin: 0 !important;
    }
}

попробуйте это, я надеюсь, что это должно работать ...!

Answer 3

Я немного изменил форматирование в HTML и CSS.

HTML

<div class="ion-content">
  <div class="ion-card">
   <h2 class="text-center margin-top">Notifications Area</h2>
  </div>
</div>

CSS

.ion-content {
   display: flex;
   flex-direction: column;
   width: 100%;
   background: grey;
   height: 500px;
}



.ion-card {
    flex-basis: 100%;
}

h2 {
   color: blue;  
}

Рабочий пример можно посмотреть здесь.https://codepen.io/Angel-SG/pen/aPpWVM