html - How to set min width on content but still never exceed parent container width - Stack Overflow

admin管理员组

文章数量:1312722

Is it possible to set minimum width for div but still respect parent container width.

Motivation: I need to have status div that if there is enough space in parents container, always have width of content width or at least 120px if content width is smaller. However if parent container is smaller than 120px, status div should not exceed maximum width of parent. In other words max-content: 100%. Below code of solution I tried.

The issue is that I can not set min-width: 120px, because it will always override max-width: 100% and overflow parent container if it is smaller than status div. I tried setting width: 120px, so max-width: 100% works in this case shrinking status container, but then I need to make sure that if parent container have more space for content that exceeds 120px, I use that space, so I set min-width: fit-content; This allows content to expand, but overflows in case of parent is smaller. It should act as in the last example instead. So how to achieve expected behavior with css only?

.parent {
  border: 1px solid blue;
  width: 200px;
  margin-bottom: 16px;
}

.status {
  display: inline-flex;
  justify-content: center;
  border: 1px solid red;
  max-width: 100%;
  width: 120px;
  min-width: fit-content;
}

.status-demo {
  display: inline-flex;
  justify-content: center;
  border: 1px solid red;
  max-width: 100%;
}

.content {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

<div>
  <div>
    Parent width 200px. Content less than 120px, should expand to 120px.
  </div>
  <div class="parent">
    <div class="status status1"><span class="content">New</span></div>
  </div>
  <div>
    Parent width 200px. Content longer than 120px, should expand to content width.
  </div>
  <div class="parent">
    <div class="status status1">
      <span class="content">Longer thatn 120px content</span>
    </div>
  </div>
  <div>
    Parent width 200px. Content longer than 200px, should not exceed parents 200px.
  </div>
  <div class="parent">
    <div class="status">
      <span class="content">Content longer than 200px so should show not exceed parent</span>
    </div>
  </div>
  <div>
    How above should actually behave
  </div>
  <div class="parent">
    <div class="status-demo">
      <span class="content">Content longer than 200px so should show not exceed parent</span>
    </div>
  </div>
</div>

Is it possible to set minimum width for div but still respect parent container width.

Motivation: I need to have status div that if there is enough space in parents container, always have width of content width or at least 120px if content width is smaller. However if parent container is smaller than 120px, status div should not exceed maximum width of parent. In other words max-content: 100%. Below code of solution I tried.

The issue is that I can not set min-width: 120px, because it will always override max-width: 100% and overflow parent container if it is smaller than status div. I tried setting width: 120px, so max-width: 100% works in this case shrinking status container, but then I need to make sure that if parent container have more space for content that exceeds 120px, I use that space, so I set min-width: fit-content; This allows content to expand, but overflows in case of parent is smaller. It should act as in the last example instead. So how to achieve expected behavior with css only?

.parent {
  border: 1px solid blue;
  width: 200px;
  margin-bottom: 16px;
}

.status {
  display: inline-flex;
  justify-content: center;
  border: 1px solid red;
  max-width: 100%;
  width: 120px;
  min-width: fit-content;
}

.status-demo {
  display: inline-flex;
  justify-content: center;
  border: 1px solid red;
  max-width: 100%;
}

.content {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

<div>
  <div>
    Parent width 200px. Content less than 120px, should expand to 120px.
  </div>
  <div class="parent">
    <div class="status status1"><span class="content">New</span></div>
  </div>
  <div>
    Parent width 200px. Content longer than 120px, should expand to content width.
  </div>
  <div class="parent">
    <div class="status status1">
      <span class="content">Longer thatn 120px content</span>
    </div>
  </div>
  <div>
    Parent width 200px. Content longer than 200px, should not exceed parents 200px.
  </div>
  <div class="parent">
    <div class="status">
      <span class="content">Content longer than 200px so should show not exceed parent</span>
    </div>
  </div>
  <div>
    How above should actually behave
  </div>
  <div class="parent">
    <div class="status-demo">
      <span class="content">Content longer than 200px so should show not exceed parent</span>
    </div>
  </div>
</div>

• html
• css

Share Improve this question Follow asked Jan 31 at 16:13 AndyallyAndyally 1,09722 gold badges1313 silver badges2929 bronze badges

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 3

You need to set min-width, width, and max-width.
The trick is using
min-width: min(100%, 120px) so content wouldn't overflow when parent width is less than 120px
width: fit-content when content is wider than 120px but not wider than parent
max-width: 100% so content wouldn't overflow when it's wider than parent and wider than 120px

I added animation on parent width to demonstrate how it works with different widths.

.parent {
  border: 1px solid blue;
  width: 50px;
  margin-bottom: 16px;
  font-size: 16px;
  
  /* for the demo purpose */
  animation: breathe 6s 1s linear infinite alternate;
}

.content {
  min-width: min(100%, 120px);
  width: fit-content;
  max-width: 100%;
  white-space: nowrap;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  border: solid 1px red;
}


/* for the demo purpose */
@keyframes breathe {
  to {
    width: 300px
  }
}

<div>
  Content less than 120px, should expand to 120px or shrink to parent width.
</div>
<div class="parent">
  <div class="content">New</div>
</div>
<div>
  Content longer than 120px, should expand to content width while less than parent width.
</div>
<div class="parent">
  <div class="content">Longer than 120px</div>
</div>
<div>
  Content longer than parent width, should not exceed parents parent width.
</div>
<div class="parent">
  <div class="content">Content longer than 200px so should show not exceed parent</div>
</div>

Set a min-width on status so it respects a minimum size i.e. 120 To ensure that it never goes over the parent container, use max-width: 100%. When necessary, make sure the.content respects ellipsis (text-overflow: ellipsis). This is simple thing that you can do but it will hide your chlid content if more than 120px.

.parent {
    border: 1px solid blue;
    width: 200px;
    margin-bottom: 16px;
    overflow: hidden;
}

.status {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border: 1px solid red;
    min-width: 120px;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 5px;
}

.content {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: inherit;
}

Process 2 : If you want to show the full content while ensuring it doesn’t exceed the parent container width, you can use word wrapping instead of text-overflow: ellipsis.

.parent {
    border: 1px solid blue;
    width: 200px;
    margin-bottom: 16px;
    overflow: hidden;
}

.status {
    display: inline-block;
    justify-content: center;
    align-items: center;
    border: 1px solid red;
    min-width: 120px;
    max-width: 100%;
    padding: 5px;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
}

.content {
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

本文标签： htmlHow to set min width on content but still never exceed parent container widthStack Overflow