Question 225787 in CSS Question posted in
Some basic documentation can be found here.

Css – Centering a flexbox that has a minimum and a maximum

I’ve got some contents that have a minimum and a maximum width.

They are in a container that can shrink and grow, but should never break these constraints.

I want to center that container if there’s ample space, but I can only get it to fill its parent (using flex-grow) or remain at the minimum dimensions (not using flex-grow).

In other words, in this example, I want:

  1. the orange to be centered in the red
  2. the orange to tightly hug the green
  3. each green to be 100px wide
.parent {
  display: flex;
  justify-content: center;
  align-items: center;

  /* To make it visible */
  height: 10rem;
  width: 90%;
  background: red;
  padding: 1rem;
}

.inline-flexbox {
  /* What do I do here to make this inline-flexbox grow up to the maximum of its contents?
  (2 * 100 px + some padding)
  flex-grow: 1; doesn't work, because then it fills its parent */

  display: inline-flex;
  flex-grow: 1;

  /* To make it visible */
  height: 80%;
  padding: 1rem;
  background: orange;
  column-gap: 1rem;
}

.flex-content {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 100px;
  max-width: 100px;
  min-width: 20px;

  /* To make it visible: */
  height: 100%;
  background: green;
}
<div class="parent">
  <div class="inline-flexbox">
        <div class="flex-content"></div>
        <div class="flex-content"></div>
  </div>
</div>
Tags:

3

Answers


  1. 0

    Using justify-content: center; and align-items: center; in the parents div would do the job like I did below or you use place-item: center; I think but am not too sure

    .parent {
  display: flex;
  justify-content: center;
  align-items: center;

  /* To make it visible */
  height: 10rem;
  width: 90%;
  background: red;
  padding: 1rem;
}

.inline-flexbox {
  /* What do I do here to make this inline-flexbox grow up to the maximum of its contents?
  (2 * 100 px + some padding)
  flex-grow: 1; doesn't work, because then it fills its parent */

  display: inline-flex;
  flex-grow: 1;

  /* To make it visible */
  height: 80%;
  padding: 1rem;
  background: orange;
  column-gap: 1rem;
  Justify-content: center;
  Align-items: center;
}

.flex-content {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 100px;
  max-width: 100px;
  min-width: 20px;

  /* To make it visible: */
  height: 100%;
  background: green;
}
    <div class="parent">
  <div class="inline-flexbox">
        <div class="flex-content"></div>
        <div class="flex-content"></div>
  </div>
</div>
    Login or Signup to reply.
  2. 0

    Don’t use max-width but define width and the shrink effect will make them smaller if needed.

    .parent {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 10rem;
  width: 90%;
  background: red;
  padding: 1rem;
}

.inline-flexbox {
  display: flex;
  min-width: 0; /* don't forget this */
  height: 80%;
  padding: 1rem;
  background: orange;
  gap: 1rem;
}

.flex-content {
  width: 100px;
  min-width: 20px;
  height: 100%;
  background: green;
}
    <div class="parent">
  <div class="inline-flexbox">
    <div class="flex-content"></div>
    <div class="flex-content"></div>
  </div>
</div>
    Login or Signup to reply.
  3. 0

    Here is the working example :
    max-width : 100px;
    min-width : 100px;

    Reason : width -> (max & min) both applied
    if max-width : 100px & min-width : 20px;
    so, width will be 20px for minimum default (will show default) and maximum it can go upto 100px;

      .parent {
    display: flex;
    justify-content: center;
    align-items: center;

    /* To make it visible */
    height: 10rem;
    width: 90%;
    background: red;
    padding: 1rem;
  }

  .inline-flexbox {
    display: flex;
    width: auto;
    /* To make it visible */
    height: 80%;
    padding: 1rem;
    background: orange;
    column-gap: 1rem;
  }

  .flex-content {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 100px;
    max-width: 100px;
    min-width: 100px;

    /* To make it visible: */
    height: 100%;
    background: green;
  }
    </style>

<div class="parent">
  <div class="inline-flexbox">
    <div class="flex-content"></div>
    <div class="flex-content"></div>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search