css flex - rozmiar diva taki jak zawartości

0

Sytuacja wygląda tak jak na załączniku pierwszym i teraz moje pytanie brzmi jak zrobić aby height tych kolumn zmieniał się dynamicznie do ich zawartości (czyli kolumna środkowa powinna być sporo krótsza. Wklejam fragment mojego kodu:

          <div class="dash">
            <div class="news">
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at dolor semper, tempor tortor varius, pellentesque ex. Nunc euismod, neque vel finibus accumsan, justo nulla cursus elit, at gravida arcu arcu eget leo. Ut in aliquet lacus. Sed lacus erat, finibus ac magna non, mattis ullamcorper nibh. Quisque dictum tempus nisi, non fringilla lacus iaculis pharetra. Nulla fermentum elit magna, eget congue nisi hendrerit in. Praesent auctor, quam viverra feugiat tincidunt, lectus purus tincidunt sem, non dapibus tellus lacus nec eros. Nullam eleifend, elit id placerat efficitur, nunc neque dictum lorem, id semper quam diam eu diam. In ipsum neque, tempor eget convallis eu, faucibus ut felis. Pellentesque quis massa a justo feugiat posuere eu id sapien. Integer ipsum ipsum, porta nec risus ut, semper iaculis lectus. Nam ac urna diam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut massa at magna bibendum euismod quis euismod arcu. Sed et lacus viverra ipsum fringilla imperdiet ultrices a quam. Sed semper sapien ligula, sed lobortis nisl aliquet nec.
            </div>

            <div class="news">
 Suspendisse laoreet maximus augue. Proin sodales posuere eros vel elementum. Integer at ligula cursus, fermentum risus et, porttitor felis. In laoreet, ante non ornare vulputate, tortor ipsum viverra leo, vel molestie massa ipsum porta libero. Pellentesque cursus vulputate orci lacinia suscipit. Curabitur condimentum aliquam risus, sed facilisis ipsum egestas ut. Sed in lacus ut ante accumsan pellentesque. Ut quis luctus libero, eu ultrices diam. Cras ac metus mauris. Pellentesque sodales viverra orci, vitae fringilla felis ultrices in.
            </div>

            <div class="news">
 Suspendisse laoreet maximus augue. Proin sodales posuere eros vel elementum. Integer at ligula cursus, fermentum risus et, porttitor felis. In laoreet, ante non ornare vulputate, tortor ipsum viverra leo, vel molestie massa ipsum porta libero. Pellentesque cursus vulputate orci lacinia suscipit. Curabitur condimentum aliquam risus, sed facilisis ipsum egestas ut. Sed in lacus ut ante accumsan pellentesque. Ut quis luctus libero, eu ultrices diam. Cras ac metus mauris. Pellentesque sodales viverra orci, vitae fringilla felis ultrices in.

  Suspendisse laoreet maximus augue. Proin sodales posuere eros vel elementum. Integer at ligula cursus, fermentum risus et, porttitor felis. In laoreet, ante non ornare vulputate, tortor ipsum viverra leo, vel molestie massa ipsum porta libero. Pellentesque cursus vulputate orci lacinia suscipit. Curabitur condimentum aliquam risus, sed facilisis ipsum egestas ut. Sed in lacus ut ante accumsan pellentesque. Ut quis luctus libero, eu ultrices diam. Cras ac metus mauris. Pellentesque sodales viverra orci, vitae fringilla felis ultrices in.
            </div>
            <div class="news">

            </div>

.dash {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  padding: 10px;
  border-radius: 6px;
  margin-bottom: 30px;
  color: #333;
  background: #fff;
  width: 100%;
  box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
}

.news {
  border: 1px solid #00bcd4;
  border-radius: 5px;
  flex: 1 1 30%;
  flex-grow: 1;
  margin: 30px 15px 30px 15px;
}

Z góry dzięki za pomoc.

1

.dash {
(...)
align-items:flex-start;
}

0

Niestety ale, chodziło o

height: 100%;

w klasie news.

0
slayer9 napisał(a):

Niestety ale, chodziło o

height: 100%;

w klasie news.

A align-items ci tu nie działa? 8-O

https://www.w3schools.com/cssref/playit.asp?filename=playcss_align-items&preval=flex-start

1 użytkowników online, w tym zalogowanych: 0, gości: 1