Margin when flex wraps-CodePudding

I have the following situation using flex: Codepen

<html>
<head>
<style>
* {
  box-sizing: border-box;
}

.first-card {
  border: 1px black solid;
  width: 480px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  
}

.content {
  flex-wrap: wrap;
  grid-gap: 32px;
  display:flex;
}

.left-content {
  border: 1px green solid;
  flex-grow: 1;
  flex-basis: 200px;
}

.right-content {
  flex-grow: 1;
  border: 1px deeppink solid;
  flex-basis: 200px;
}

</style>
</head>
  <body>
    <div class="first-card">
      <h1>Title</h1>
      <div class="content">
        <div class="left-content">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam ab assumenda ex sint esse atque consectetur in velit voluptate quibusdam beatae quam vero a natus, id recusandae laudantium sed, incidunt rem? Dolores eveniet beatae asperiores repellendus veniam hic accusantium qui, totam non fuga earum nobis architecto. Et rem alias tempore.
        </div>
        <div class="right-content">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor, consequuntur omnis doloremque nostrum aliquam minima facere, modi possimus quo atque velit eum pariatur assumenda, quisquam laborum officiis at! Ut libero accusamus delectus dignissimos vitae reiciendis quasi tempora labore culpa doloremque ullam, vero, enim repellat qui nihil quaerat? Reiciendis, aspernatur quo?
        </div>
      </div>
      <div class="buttons">
        <button> My button</button>
      </div>
    </div>
  </body>
</html>

I want that when the div is smaller than 490px (it wraps) that a margin exists between "My button" and the last item in "content", which would be "right content" from the example.

Is there a way to do so?

CodePudding user response：

Use this with content margin-bottom:clamp(0px,(450px - 100%)*9999,20px). It's a conditional margin based on the value 450px. If the container is bigger than 450px you have 0px else you have 20px

* {
  box-sizing: border-box;
}

.first-card {
  border: 1px black solid;
  width: 480px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  overflow:auto;
  resize:horizontal;
}

.content {
  flex-wrap: wrap;
  grid-gap: 32px;
  display: flex;
  margin-bottom:clamp(0px,(450px - 100%)*9999,20px)
}

.left-content {
  border: 1px green solid;
  flex-grow: 1;
  flex-basis: 200px;
}

.right-content {
  flex-grow: 1;
  border: 1px deeppink solid;
  flex-basis: 200px;
}

<html>

<body>
  <div class="first-card">
    <h1>Title</h1>
    <div class="content">
      <div class="left-content">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam ab assumenda ex sint esse atque consectetur in velit voluptate quibusdam beatae quam vero a natus, id recusandae laudantium sed, incidunt rem? Dolores eveniet beatae asperiores repellendus
        veniam hic accusantium qui, totam non fuga earum nobis architecto. Et rem alias tempore.
      </div>
      <div class="right-content">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor, consequuntur omnis doloremque nostrum aliquam minima facere, modi possimus quo atque velit eum pariatur assumenda, quisquam laborum officiis at! Ut libero accusamus delectus dignissimos vitae
        reiciendis quasi tempora labore culpa doloremque ullam, vero, enim repellat qui nihil quaerat? Reiciendis, aspernatur quo?
      </div>
    </div>
    <div class="buttons">
      <button> My button</button>
    </div>
  </div>
</body>

</html>

CodePudding user response：

Unfortunately with just CSS, no. If your div width relies on something like screen width, you could use media queries.

With javascript, You could poll the element for its width and conditionally add or remove the styling needed for the buttons margin-top.