Почему не работает overflow: hidden?

Question

[Даниил Сидоров]

Здравствуйте, делаю вёрстку на bootstrap3. Появилась проблема: почему-то не работает overflow: hidden при закруглении краёв.

Вот вёрстка:


Вот код:

<div class="slide-container">
    <div class="container">
        <div class="row">
            <div class="col-md-12">

                <div class="slide">
                    <div class="col-md-5 img-container">

                    </div>
                    <div class="col-md-7 content">
                        <h2 class="dfx-title">КАК ПРОДАВАТЬ ЧЕРЕЗ ПРИЛОЖЕНИЕ</h2>
                        <p class="dfx-text">Lorem ipsum dolor sit amet, consectetur
                            adipisicing elit. Doloremque nam praesentium voluptate
                            voluptatem. Animi, possimus.</p>
                        <ul class="dfx-list">
                            <li>для B2C (повторные продажи и привязывающий сервис в
                                чатах)
                            <li>разработчики – ангелы
                            <li>удивительные условия
                            <li>Антихайп
                        </ul>
                        <h2 class="dfx-title">КАК ПРОДАВАТЬ ЧЕРЕЗ ПРИЛОЖЕНИЕ</h2>
                        <p class="dfx-text">Lorem ipsum dolor sit amet, consectetur
                            adipisicing elit. Doloremque nam praesentium voluptate
                            voluptatem. Animi, possimus.</p>
                        <ul class="dfx-list">
                            <li>для B2C (повторные продажи и привязывающий сервис в
                                чатах)
                            <li>разработчики – ангелы
                            <li>удивительные условия
                            <li>Антихайп
                        </ul>
                        <h2 class="dfx-title">КАК ПРОДАВАТЬ ЧЕРЕЗ ПРИЛОЖЕНИЕ</h2>
                        <p class="dfx-text">Lorem ipsum dolor sit amet, consectetur
                            adipisicing elit. Doloremque nam praesentium voluptate
                            voluptatem. Animi, possimus.</p>
                        <ul class="dfx-list">
                            <li>для B2C (повторные продажи и привязывающий сервис в
                                чатах)
                            <li>разработчики – ангелы
                            <li>удивительные условия
                            <li>Антихайп
                        </ul>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>

Sass:

.slide-container
      width: 100%
      margin-top: 25px
      height: 450px
      .slide
        overflow: hidden
        border: 1px solid rgba(#000, .1)
        height: 450px
        border-radius: 10px
        .img-container
          background: url("../img/graphictwister_137.jpg")
          background-size: cover
          background-position: center center
          height: 450px
        .content
          padding: 60px 60px 60px 30px
          height: 450px
          overflow-y: scroll

Подскажите, что я делаю не так?

Comments

[Ivan Bogachev]

Почему не работает overflow: hidden?

Быть может потому, что в стилях вообще нет overflow: hidden? Вы уверены, что в примере ничего не пропущено?

[Даниил Сидоров]

Ivan Bogachev, Забыл скопировать. Но вопрос всё тот же.

[Ivan Bogachev]

Ок, скопипастил ваш код в песочницу, что и вам советую делать в перспективе. Что конкретно не работает?

[Даниил Сидоров]

Ivan Bogachev, У меня проблема в том, что он почему-то не обрезает углы.

[Ivan Bogachev]

DaniLaFokc, Приведите ссылку на проблемный сайт или свою песочницу, в которой можно воспроизвести проблему.

[Dima Polos]

DaniLaFokc, пробовали бордер-радиус задать САМОЙ картинке, такой же, как у родителя?

[Даниил Сидоров]

Dima Polos, Ну это уже костыль. Меня именно интересно почему браузер так странно себя повёл.

[Даниил Сидоров]

Ivan Bogachev, Нашёл странную вещь: в бутстраповской сетке у всех классов col-**-** есть свойство position: relative. И если его отключить, то всё нормально работает.

[Dima Polos]

DaniLaFokc, ну вот и ответ, вылез из потока и не оверфловится) спс, будем знать

Answer 1

[Дмитрий]

<div class="slide">
                    <div class="col-md-5 img-container">

                    </div>

Первая из причин - закрыть забыли col-md-5 img-container

Вторая

<!--для md сетки выставляется 12 колонок и дальше перечисляется что из этих дочек и сколько занимает колонок-->
            <div class="col-md-12">
               <div class="col-md-5 img-container">
<!--Под слайдер пятак-->
                <div class="slide"></div>
                    </div>
<!--Закрыта часть блока с col-md-5-->
                    <div class="col-md-7 content">
                  <!--Под контент 7 выделяется-->
                         ...</div>
<!--Закрывается контейнер с указанием координат для md сетки-->