html - Have children expand to max-width within a parent that shrinks to fit - Stack Overflow

admin管理员组

文章数量:1127694

I want to have a parent container shrink to fit the contents of its children. This I've found is doable with either inline-block or inline-flex. I also want the children to be able to expand to a max-width, regardless of their content, which is where I'm having a problem.

It seems the two conditions are in conflict, as the child will not expand to the max-width in any scenario I try unless its contents allow it to. I simply want the child to take the maximum width it can and have the parent adjust accordingly.

Here's a fiddle with what I'm going for: /

.red-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    container-type: inline-size;
    container-name: page-wrapper;
    padding: 20px;
    border: 1px solid red;
}

.blue-header {
  border: 1px solid blue;
  text-align: center;
}

/* this style is set inside the component that will load here */
.green-dynamic-content {
  max-width: 500px; /* should be 500 but it is not */
  border: 1px solid green;
  padding: 5px;
}

.orange-footer {
  border: 1px solid orange;
  text-align: right;
}

<div class="red-wrapper">
  <div class="black-content">
    <div class="blue-header">
      Header
    </div>
    
    <!-- begin component w. style -->
    <div class="green-dynamic-content">
      Width set by component
    </div>
    <!-- end load component -->
    
    <div class="orange-footer">
      Footer
    </div>
  </div>
</div>

I want to have a parent container shrink to fit the contents of its children. This I've found is doable with either inline-block or inline-flex. I also want the children to be able to expand to a max-width, regardless of their content, which is where I'm having a problem.

It seems the two conditions are in conflict, as the child will not expand to the max-width in any scenario I try unless its contents allow it to. I simply want the child to take the maximum width it can and have the parent adjust accordingly.

Here's a fiddle with what I'm going for: https://jsfiddle.net/handcraft4/t857qyb4/39/

.red-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    container-type: inline-size;
    container-name: page-wrapper;
    padding: 20px;
    border: 1px solid red;
}

.blue-header {
  border: 1px solid blue;
  text-align: center;
}

/* this style is set inside the component that will load here */
.green-dynamic-content {
  max-width: 500px; /* should be 500 but it is not */
  border: 1px solid green;
  padding: 5px;
}

.orange-footer {
  border: 1px solid orange;
  text-align: right;
}

<div class="red-wrapper">
  <div class="black-content">
    <div class="blue-header">
      Header
    </div>
    
    <!-- begin component w. style -->
    <div class="green-dynamic-content">
      Width set by component
    </div>
    <!-- end load component -->
    
    <div class="orange-footer">
      Footer
    </div>
  </div>
</div>

Does anyone have any suggestions?

• html
• css
• flexbox

Share Improve this question Follow asked Jan 8 at 18:16 Ryan BuckleyRyan Buckley 7722 silver badges99 bronze badges 2

• It would likely be helpful to look into min-content/max-content/fit-content – Austin Duling Commented Jan 8 at 18:29
• @AustinDuling max-content seems to be similar to what i need, but the problem is this only works for max-width then there's enough content within the contain to take up that width. If the div only contains a few characters, for instance, I still want it to fill to the max-width that it can. I don't see a way to do that. – Ryan Buckley Commented yesterday

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 2

You are using container so set width: 100cqw to the green-dynamic-content element and it will do what you want.

.red-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    container-type: inline-size;
    container-name: page-wrapper;
    padding: 20px;
    border: 1px solid red;
}

.blue-header {
  border: 1px solid blue;
  text-align: center;
}

/* this style is set inside the component that will load here */
.green-dynamic-content {
  max-width: 500px; /* should be 500 but it is not */
  width: 100cqw;
  border: 1px solid green;
  padding: 5px;
  box-sizing: border-box;
}

.orange-footer {
  border: 1px solid orange;
  text-align: right;
}

<div class="red-wrapper">
  <div class="black-content">
    <div class="blue-header">
      Header
    </div>
    
    <!-- begin component w. style -->
    <div class="green-dynamic-content">
      Width set by component
    </div>
    <!-- end load component -->
    
    <div class="orange-footer">
      Footer
    </div>
  </div>
</div>

Set their container's width to min-content which will make it shrink to its minimum content width. This won't work when .green-dynamic-content has max width; instead, set its width using width: 500px.

Updated CSS:

.red-wrapper {
    display: flex;
    flex-direction: column;
    /* align-items: center; */
    container-type: inline-size;
    container-name: page-wrapper;
    padding: 20px;
    border: 1px solid red;
}

.blue-header {
    border: 1px solid blue;
    text-align: center;
}

/* this style is set inside the component that will load here */
.green-dynamic-content {
    /* max-width: 500px; */
    width: 500px;
    margin-inline: auto;
    /* align-self: center; */
    /* should be 500 but it is not */
    border: 1px solid green;
    padding: 5px;
}

.orange-footer {
    border: 1px solid orange;
    text-align: right;
}

.black-content {
    width: min-content;
}

本文标签： htmlHave children expand to maxwidth within a parent that shrinks to fitStack Overflow