Почему чекбокс расширается со другим?

Question

[EnGold]

Я пытался сделать кастомный список, но возникает следующая проблема, первый чекбокс расширается со вторым, хотя не должен

<div class="custom_details">
                            <input type="checkbox" id="faq-1">
                            <p><label for="faq-1">programm language</label></p>
                            <div class="list">
                                <ul>
                                    <li>java</li>
                                    <li>javascript</li>
                                    <li>c#</li>
                                </ul>
                            </div>
                        </div>
                        <div class="custom_details">
                            <input type="checkbox" id="faq-2">
                            <p><label for="faq-2">I can do</label></p>
                            <div class="list">
                                <ul>
                                    <li>mobile apps</li>
                                    <li>frontend sites</li>
                                    <li>games(3d models)</li>
                                </ul>
                            </div>
                        </div>

.custom_details{
  padding: 0px 10px;
  position: relative;
  p {
    border-radius: 15px;
    padding: 15px ;
    background: rgba($color: rgb(255, 196, 224), $alpha: 0.2);
    transition: all 0.5s;
    backdrop-filter: blur(15px);
    margin: 0px;
    position: relative;
  }
  div.list {
    position: relative;
    max-height: 0px;
    overflow: hidden;
    transition: max-height 0.5s;
    border-radius: 0px 0px 15px 15px;
    background: rgba($color: rgb(241, 164, 200), $alpha: 0.2);
    backdrop-filter: blur(15px);
  }
  ul{
    position: S;
    list-style: none;
    padding: 25px;
    margin: 0px;
  }
  input{
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    // opacity:0;
    // visibility: 0;
    z-index: 1;
    &:checked {
      ~ p{   
      box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5);
      border-radius: 15px 15px 0px 0px;
      }
      ~ p label::before {
        border-left: 15px solid transparent;
        border-top: 20px solid white;
        margin-top: 12px;
        margin-right: 10px;
      }
      ~ p ~ div.list{
        max-height:200px;
      }
    }
  }
}

Comments

[Ankhena]

Очень "мудро" с вашей стороны не показать стили родителя.
А хрустальный шарик говорит, что родитель либо флекс либо грид у которых align-items: stretch

[EnGold]

Ankhena, ох, проблема правда была в флексе, но как же тогда мне разместить два дива без этой проблемы?

[Ankhena]

EnGold, задать другой, подходящий, align-items не вариант?

[EnGold]

Ankhena, странно, но правда не работает, но при этом margin отсутствует

[Ankhena]

EnGold, так далеко хрустальный шарик не работает.

Оформите код с видимой проблемой в песочницу на codepen.io.
И опишите и/или покажите скрином/видео, какого результат хотите добиться.

[EnGold]

Ankhena, https://codepen.io/engold243/pen/wvjdNMV
в общем все что мне нужно так это то, что бы чекбокси не увеличивались одновременно

[Ankhena]

EnGold, я не нашла в вашей песочнице где вы задаете align-items для box.
По умолчанию значение stretch. Вам нужно любое другое подходящее.

[EnGold]

Ankhena, я нигде не задаю align-items, раньшу я использовал display:flex в .box

[Ankhena]

EnGold, перечитайте, пожалуйста, мой первый комментарий.
stretch растягивает все дочерние элементы в строке.
Вас это поведение не устраивает.
Значит, нужно поменять stretch на нужное вам значение.

Вы этого не сделали и удивляетесь почему всё происходит как раньше.

[EnGold]

Ankhena, да, потестил и вы были правы! Большое спасибо! ^^'

[Ankhena]

EnGold, хорошо, что разобрались

Answer 1

[EnGold]

По совету Ankhena я изменил align-items на baseline и все стало работать правильно