Как отменить overflow:hidden, для дочернего элемента

156
28 октября 2019, 05:20

Есть вот такая вёрстка которую нельзя ломать.

  .form-line__box{ 
        -webkit-backface-visibility: hidden; 
        -moz-backface-visibility: hidden; 
        -webkit-transform: translate3d(0,0,0); 
        -moz-transform: translate3d(0,0,0); 
        overflow: hidden; 
        position: relative; 
        padding: 3em 3em; 
        border-radius: 20px; 
        background: #293744; 
        background-position-x: 0%; 
        background-position-y: 0%; 
        background-image: none; 
        background-size: auto; 
        color: #fff; 
    } 
    .select__list{ 
        background: transparent; 
        border: 1px solid #467797; 
        margin: 0px 0; 
        position: absolute; 
        z-index: 100; 
    }
    <div class="form-line__box"> 
                        <div class="g-row g-row_flex g-ai_c_md"> 
                            <div class="g-col g-col_md_6"> 
         
         
                               <div class="g-mb_2_xs g-mb_0_md"> 
                                    <p class="h2 h2_no_line g-clr_inh">Получите единый инструмент<br> 
                                        управления вашим бизнесом</p> 
                                    <p>Оставьте заявку и получите подробную <br> 
                                        консультацию наших специалистов.</p> 
                                </div> 
         
                                            </div> 
                        <form class="g-col form-dark g-col_md_6 js-validated" action="?" novalidate="novalidate"> 
                            <fieldset class=""> 
                                <ul class="form-line__list g-row"> 
                                    <li class="form-line__item g-col g-col_md_6"> 
                                        <label> 
                                            <span class="form-dark__label">Имя*</span> 
                                            <input type="text" class="form-dark__field" name="name"> 
                                        </label> 
                                    </li> 
                                    <li class="form-line__item g-col g-col_md_6"> 
                                        <label> 
                                            <span class="form-dark__label">Телефон*</span> 
                                            <input type="tel" name="phone" class="form-dark__field js-mask"> 
                                        </label> 
                                    </li> 
                                    <li class="form-line__item g-col g-col_md_6"> 
                                        <label> 
                                            <span class="form-dark__label">E-mail*</span> 
                                            <input type="email" name="email" class="form-dark__field js-mask"> 
                                        </label> 
                                    </li> 
                                    <li class="form-line__item g-col g-col_md_6" style="z-index: 100;"> 
                                            <label> 
                                                <span class="form-dark__label">Тип компании</span> 
                                                 
                                                    <div class="select"><div class="select__gap form-dark__field on active"><ul class="select__list" style=""> 
        <li class="select__item" data-value="Фитнес-клуб"><span>Фитнес-клуб</span></li> 
        <li class="select__item" data-value="Танцевальная школа"><span>Танцевальная школа</span></li> 
        <li class="select__item" data-value="Йога-центр"><span>Йога-центр</span></li> 
        <li class="select__item" data-value="Кросфит"><span>Кросфит</span></li> 
        <li class="select__item" data-value="Велнес-центр"><span>Велнес-центр</span></li> 
        <li class="select__item" data-value="Школа единоборств"><span>Школа единоборств</span></li> 
        <li class="select__item" data-value="Теннисный клуб"><span>Теннисный клуб</span></li> 
        <li class="select__item" data-value="Бассейн"><span>Бассейн</span></li><li class="select__item" data-value="Детский развивающий центр"><span>Детский развивающий центр</span></li> 
        <li class="select__item" data-value="Стретчинг"><span>Стретчинг</span></li> 
        <li class="select__item" data-value="Салон красоты"><span>Салон красоты</span></li> 
     
    </ul> 
    </div> 
    </div> 
         
                                            </label> 
                                        </li> 
                                    <li class="form-line__item g-col g-col_md_6"> 
                                        <span class="form-dark__label g-hide_xs g-show_md">&nbsp;</span> 
         
                                                                            <input type="submit" class="btn btn_sz" value="Оставить заявку" style="width: 100%; font-size: 14px;"> 
         
                                                                    </li> 
                                </ul> 
                                <input type="hidden" name="group" value="free-schedule"> 
                            </fieldset> 
                        </form> 
                    </div> 
                </div> 
 
  

.select__list - это выподающий список. Проблема в том что из-за overflow:hidden у .form-line__box он обрезается по границам родителя. Как конкретно для .select__list отменить overflow:hidden;?

Answer 1

Никак. Это свойство не наследуется.

Answer 2
.form-line__box {overflow:visible;}
READ ALSO
Задержка показа блока

Задержка показа блока

Хочу сделать элемент задержки показа блока на 5 секундТоесть загрузили страницу и через 5 секунд появился блок с линками и т

128
Как создать элемент на пустой странице на js [закрыт]

Как создать элемент на пустой странице на js [закрыт]

Для примера, есть пустая страница на html, кроме тега script на ней ничего нетПодскажите как создать на ней блок или абзац

129
Как протестировать componentDidMount при помощи jest и enzyme, в котором вызывается функция не из props

Как протестировать componentDidMount при помощи jest и enzyme, в котором вызывается функция не из props

Подскажите, как можно протестировать данный компонент при помощи jest и enzyme

125