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

Css – white-space: nowrap with flex: 1; child width too small to fit text

I can’t find any solution to have 2 same size divs that will fit text inside it in one line. Looks like white-space: nowrap width is not taken into consideration after I set on parent width: fit-content.

They should be as small as possible, always same size, no wrapping text to second line.

div {
  display: flex;
  width: fit-content;
}

.button {
  padding: 10px 20px;
  flex: 1;
  white-space: nowrap;
  min-width: 130px;
  width: fit-content;
}

.button1 {
  background: red;
}

.button2 {
  background: green;
}
<div>
  <div class="button button1">Short Text</div>
  <div class="button button2">A Long Text Button That Has Greater Width </div>
</div>
Tags:

3

Answers


  1. 0

    can be done with CSS grid:

    .container {
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
}

.button {
  padding: 10px 20px;
  white-space: nowrap;
  min-width: 130px;
  overflow: auto;
}

.button1 {
  background: red;
}

.button2 {
  background: green;
}
    <div class="container">
  <div class="button button1">Short Text</div>
  <div class="button button2">A Long Text Button That Has Greater Width </div>
</div>
    Login or Signup to reply.
  2. 0 
    div {
  display: flex;
  width: fit-content;
}

.button {
  padding: 10px 20px;
  flex: 1;
  white-space: nowrap;
  min-width: 130px;
  width: fit-content;
}

.button1 {
  background: red;
}

.button2 {
  background: green;
  width: 500px;
}
    <div>
  <div class="button button1">Short Text</div>
  <div class="button button2">A Long Text Button That Has Greater Width </div>
</div>
    Login or Signup to reply.
  3. 0

    Solution # 1 (with flex)

    Use flex-basis.

    The flex-basis property determines the initial size of a flex item before the remaining space is distributed by the system during layout.

    More information – Stack Overflow Answer

    .flex {
  display: flex;
  width: fit-content;
}

.button {
  flex-basis: 100%; /* HERE (in child element) */
  padding: 10px 20px; 
  white-space: nowrap;
  min-width: 130px;
  width: 100%;
  overflow: auto;
}

.button1 {
  background: red;
}

.button2 {
  background: green;
}
    <h2>Solution (with 2 elements)</h2>
<div class="flex">
  <div class="button button1">Short Text</div>
  <div class="button button2">A Long Text Button That Has Greater Width </div>
</div>

<h2>Solution (with more elements)</h2>
<div class="flex">
  <div class="button button1"># 1 Short Text</div>
  <div class="button button2"># 2 A Long Text Button That Has Greater Width </div>
  <div class="button button1"># 3 Short Text</div>
  <div class="button button2"># 4 A Long Text Button That Has Greater Width </div>
  <div class="button button1"># 5 Short Text</div>
  <div class="button button1"># 6 Short Text</div>
  <div class="button button1"># 7 Short Text</div>
</div>

    Solution # 2 (with flex and javascript)

    Use JavaScript to set children’s width to width of longest element.

    // Get all container
const flexContainers = document.querySelectorAll('.flex')

// Run function to all container
flexContainers.forEach((flexContainer) => {
  // Get all children from current container
  const children = flexContainer.querySelectorAll('.button')
  // Find longest child
  let longestChild = children[0]
  children.forEach((child) => {
    if (child.scrollWidth > longestChild.scrollWidth) {
      longestChild = child
    }
  })
  // Set width of children
  children.forEach((child) => {
    child.style.width = `${longestChild.scrollWidth}px`
  })
})
    .flex {
  display: flex;
  width: fit-content;
}

.button {
  flex-basis: 100%; /* HERE (in child element) */
  padding: 10px 20px; 
  white-space: nowrap;
  min-width: 130px;
  width: 100%;
}

.button1 {
  background: red;
}

.button2 {
  background: green;
}
    <h2>Solution (with 2 elements)</h2>
<div class="flex">
  <div class="button button1">Short Text</div>
  <div class="button button2">A Long Text Button That Has Greater Width </div>
</div>

<h2>Solution (with more elements)</h2>
<div class="flex">
  <div class="button button1"># 1 Short Text</div>
  <div class="button button2"># 2 A Long Text Button That Has Greater Width </div>
  <div class="button button1"># 3 Short Text</div>
  <div class="button button2"># 4 A Long Text Button That Has Greater Width </div>
  <div class="button button1"># 5 Short Text</div>
  <div class="button button1"># 6 Short Text</div>
  <div class="button button1"># 7 Short Text</div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search