Как сделать автоматически расширяющийся контейнер для отзывов?

Question

[PlasterTom]

1. Сейчас контейнеру .carousel-items задана высота 250px. Как сделать так, чтобы контейнер автоматически подстраивался под содержимое? И делал это только по вертикали, потому что по горизонтали есть контент, который необходимо скрыть (другие отзывы).

2. Как организовать код, чтобы на мобильных можно было листать отзывы движением пальца? Дайте подсказку хотя бы как это гуглится.

<section class="reviews">
                <div class="wrapper2">
                    <h2>Отзывы</h2>
                    <div class="carousel">
                        <ul class="carousel-indicators">
                            <li>
                                <label for="slide-1" class="slide-indicator darker">●</label>
                            </li>
                            <li>
                                <label for="slide-2" class="slide-indicator">●</label>
                            </li>
                            <li>
                                <label for="slide-3" class="slide-indicator">●</label>
                            </li>
                        </ul>
                        <div class="carousel-items">
                            <input type="radio" id="slide-1" name="carousel" hidden checked>
                            <div class="carousel-item">
                                <p>Доктор мне очень понравилась. Видно, что она квалифицированная, внимательная. И в принципе, уже даже первый сеанс достаточно помог в каких-то вопросах, которые меня интересовали. Поэтому, самые положительные отзывы! Я посмотрела в интернете про нее. И в первой очереди по критерию образования выбрала доктора. Потому что она закончила МГУ, и какие-то специализированные курсы. И плюс, отзывы других клиентов я нашла в интернете. Евгения Александровна внимательная, спокойная, квалифицированная врач.
                                </p>
                                <span></span>
                                <h3>Мария</h3>
                            </div>

                            <input type="radio" id="slide-2" name="carousel" hidden>
                            <div class="carousel-item">
                                <p>Попала к психологу через этот сайт. Мне сразу понравилась Евгения Александровна своей приветливостью и доброжелательностью. Вежливо встретила и выслушала, дала мне выговориться, а меня, порой, несёт в разговоре!
                                </p>
                                <span></span>
                                <h3>Светлана</h3>
                            </div>

                            <input type="radio" id="slide-3" name="carousel" hidden>
                            <div class="carousel-item">
                                <p>Врач очень профессиональный. У меня были проблемы с самоопределением. Какие-то чувства тревоги и дискомфорта. У меня было депрессивное состояние. Доктор мне помогла. Я почувствовала себя легче, более уверенной. В дальнейшем я планирую с ней работать.
                                </p>
                                <span></span>
                                <h3>Юлия</h3>
                            </div>
                        </div>
                    </div>
                    <!--carousel -->
                </div>
                <!--wrapper2 -->
            </section>

/*================================================
// ОТЗЫВЫ
//================================================*/

/*Общее*/
.reviews {
    background-color: rgb(249, 247, 239);
}

.wrapper2 {
    max-width: 970px;
    margin-right: auto;
    margin-left: auto;
    padding: 35px 10px 35px 30px;
}

.wrapper2 h2 {
    display: block;
    border-bottom: none;
}

/*Карусель*/

.carousel {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    
}

.carousel-items {
    position: relative;
    overflow: hidden;
    width: 605px;
    height: 250px;
}

.carousel-item {
    position: absolute;
    top: 0;
    left: 100%;
    width: 605px;
    height: 100%;
}

[id^='slide']:checked + .carousel-item {
    left: 0;
    transition: left 0.6s ease-in-out;
}

.carousel-indicators {
    list-style: none;
    color: rgb(197, 195, 188);
}

.carousel-indicators li {
    display: inline-block;
}

.slide-indicator {
    border-radius: 50%;
    cursor: pointer;
    font-size: 28px;
    padding: 5px 10px;
    transition: background 0.1s ease-in-out;
}

Ссылка на фиддл

Answer 1

[Алексей Юдов]

Для блока, содержащего отзывы, сделайте правильную структуру и тогда при написании CSS кода все выстроится как нужно. И в любом случае у главного контейнера будут такие св-ва :

.main-container{
  width: 90%;   // Это к примеру
  height: auto;   // Можно не писать, это свойство всегда auto
  overflow: auto;
}

К примеру о структуре контейнера. Я бы делал что-то подобное.

<div class="main-container"> <!-- Блок содержащий все отзывы -->

  <div class="review-container">  <!-- Отдельный отзыв с данными -->
    <div class="reviewer-name"> Alex </div>
    <div class="review-text"> Something review text </div>
    <div class="review-date"> 28.10.2017 </div>
  </div>

</div>

... но на вашем месте я бы подумал о том, что стоит все таки при клике на кнопку выгружать отзывы на страницу. Это сэкономит время загрузки и трафик например, также ускорит загрузку всей страницы в целом

Answer 2

[Евгений]

Как минимум не задавать ему жестко высоту. или min-height использовать.

Comments

[PlasterTom]

Без жесткой высоты текст выходит за рамки блока(
И из-заoverflow: hidden остается видна только 1 строчка.