2-row layout with dynamic width of bottom row

Question

I want a a design with two rows. Both contain dynamic content of unknown length. The content of the bottom row should define the length, the top row should adjust its content to that length.

The height of the bottem row is fixed, the height of the top row should fill the entire space.

This is what I tried:

.wrapper {
  display: flex;
  flex-direction: column;
  border: solid;
  height: 100vh;
}

.top {
  flex-grow: 1;
  max-width: 100%;
}

<div class="wrapper">
  <div class="top">
    Lorem ipsum dolor sit ameicies. Vitae semper quis lectus nulla. Pretium viverra suspendisse potenti nullam ac tortor vitae purus. Neque sodales ut etiam sit amet. Sed id semper risus in hendrerit gravida. Ut tristique et egestas quis ipsum suspendisse.
    Et sollicitudin ac orci phasellus egestas tellus rutrum. Odio ut sem nulla pharetra diam sit amet. Pellentesque dignissim enim sit amet venenatis urna cursus. Auctor neque vitae tempus quam. Congue nisi vitae suscipit tellus. Enim lobortis scelerisque
    fermentum dui. Sit amet dictum sit amet justo donec. Odio ut sem nulla pharetra diam sit amet nisl. Lacinia at quis risus sed. Natoque penatibus et magnis dis parturient montes. Odio euismod lacinia at quis. Lectus mauris ultrices eros in cursus.
    Sit amet nisl suscipit adipiscing bibendum. Lorem mollis aliquam ut porttitor leo a diam. Risus ultricies tristique nulla aliquet. Porta lorem mollis aliquam ut. Tempus urna et pharetra pharetra massa. Nisl pretium fusce id velit. Est pellentesque
    elit ullamcorper dignissim cras tincidunt. Congue quisque egestas diam in arcu cursus euismod quis. Ultrices dui sapien eget mi proin sed.

  </div>

  <h1 class="bottom">
    Heading here defines max width
  </h1>

</div>

THe problem is that the first box is using its entire width. How can I stop that?

is this a full-width layout for a page? why should the width be defined by the bottom container instead of the space the parent element has? is that an acceptable solution? — Thatkookooguy, Aug 21 '22 at 08:56
@Thatkookooguy its not a full-widht layout. I want some boxes side by side (inside a flex container), where with is made up by heading — Adam, Aug 21 '22 at 09:56
@yousoumar I didn't downvote, but I was actually looking for a css only solution and found it at https://stackoverflow.com/questions/55040250/how-to-match-width-of-text-to-width-of-dynamically-sized-image-title `.top{ width:0; min-width:100%; }` does the trick :) — Adam, Aug 21 '22 at 10:01

2-row layout with dynamic width of bottom row

0 Answers0