Push the right aligned element down when the first left element is too long

user_7892014 0
Viewed 48

enter image description here

I'm trying to achieve this, where brown gets pushed down when pink is too long, and pink is dynamically sized based on its text content.

I was only able to achieve this using javascript and two templates, if pink length is over X use second template, but I'm wondering if there's a way to achieve this using CSS only?

I tried meddling with grid auto-fill/auto-fit with minmax, float, flex with wrap, but I couldn't get to the desired result with these.

.parent {
  width: 170px;
}

.flex {
  display: flex;
 }

div {
  outline: 2px solid rgba(255, 0,0, 0.3);
}
<div>
  <p>scenario A</p>
  <div class="parent flex">
    <div>
      <div class="one">A short title</div>
      <div class="three">Some text here</div>
      <div class="three">some more text</div>
    </div>
    <div>
      <button>A button</button>
    </div>
  </div>
</div>

<div>
  <p>scenario B</p>
  <div class="parent">
      <div class="one">Testing a very long title</div>
      <div class="flex">
        
      <div>
        <div class="three">Some text here</div>
        <div class="three">some more text</div>
      </div>
      <div>
        <button>A button</button>
      </div>
      </div>
  </div>
</div>

<p>can a component achieve both a and b with only css?

flexbox css-grid css
1 Answers

I found a solution, it requires having fixed height in the first row, and the right side button will basically overflow when needed.

Will wait a bit before accepting my own solution in case someone came with a better one.

.container {
  width: 300px;
  display: flex;
  gap: 10px;
  padding: 16px;
  font-size: 14px;
  font-family: Arial;
}

.text {
  flex: 1;
  min-width: 0;
}

.first-row {
  height: 22px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.image {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #444;
}

.title {
  flex-grow: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
<h2>Long title</h2>
<div class="container">
  <div class="image"></div>
  <div class="text">
    <div class="first-row">
      <div class="title">Test title test title test title</div>
      <button>Visit store</button>
    </div>
    <div class="three">in the stores</div>
    <div class="three">sponsored</div>
  </div>
</div>

<h2>Short title</h2>
<div class="container">
  <div class="image"></div>
  <div class="text">
    <div class="first-row">
      <div class="title">Short title</div>
      <button>Visit place</button>
    </div>
    <div class="three">in the stores</div>
    <div class="three">sponsored</div>
  </div>
</div>

<h2>Very long title</h2>
<div class="container">
  <div class="image"></div>
  <div class="text">
    <div class="first-row">
      <div class="title">Test title test titleTest title test titleTest title test title</div>
      <button>Visit place</button>
    </div>
    <div class="three">in the stores</div>
    <div class="three">sponsored</div>
  </div>
</div>

user_78920140
Related