Flex display：做一个列宽作为内容

Question

我有一个简单的两列布局：

• 左边有一些文字
• 右侧有一个或多个链接按钮

这是我的代码

.container {
  padding: 20px;
  border: 2px solid black;
  display: flex;
  gap: 15px;
  border-radius: 10px;
}

.left-column {
  border: 1px solid lightgray;
  display: flex;
  justify-content: center;
  align-items: center;
}

.right-column {
  border: 1px solid tomato;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.button-link {
  border: 2px solid black;
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  white-space: nowrap;
}

<div class="container">
  <div class="left-column">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
    labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
    laboris nisi ut aliquip ex ea commodo consequat.
  </div>
  <div class="right-column">
    <a class="button-link">A link button</a>
    <a class="button-link">Another link button</a>
  </div>
</div>

我需要右列的宽度不大于最大按钮的大小（在本例中是第二个按钮Another link button）。 左边的文字占据了整个剩余空间。 链接按钮内的文本不应换行。

How it is	How it should be

Answer 1

检查这个

.container {
  padding: 20px;
  border: 2px solid black;
  display: flex;
  gap: 15px;
  border-radius: 10px;
}

.left-column {
  border: 1px solid lightgray;
  display: flex;
  justify-content: center;
  align-items: center;
  flex:auto;
}

.right-column {
  border: 1px solid tomato;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
flex:1;
}

.button-link {
  border: 2px solid black;
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  white-space: nowrap;
}

<div class="container">
  <div class="left-column">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
    labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
    laboris nisi ut aliquip ex ea commodo consequat.
  </div>
  <div class="right-column">
    <a class="button-link">A link button</a>
    <a class="button-link">Another link button</a>
  </div>
</div>

Answer 2

<style>
    .container {
        padding: 20px;
        border: 2px solid black;
        display: flex;
        gap: 15px;
        border-radius: 10px;
    }

    .left-column {
        border: 1px solid lightgray;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
    }

    .right-column {
        border: 1px solid tomato;
        display: flex;
        flex-direction: column;
    }

    .button-link {
        border: 2px solid black;
        padding: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 10px;
        white-space: nowrap;
    }
</style>