Html Question posted in
Some basic documentation can be found here.

Html – how to split div into 2 parts and each part will not give in their width?

My goal is to split a div into 2 equal parts.

The problem is that when one part require wider width, the other part give in.

Note:

  1. the VerylongtextVerylongtextVerylongtext is intentionally wrapped with <div> to simulate wrapped by a button.

stackblitz: https://jsfiddle.net/j7wd4x3k/

<div style="display: flex">
  <!-- Left -->
  <div style="background: yellow; flex: 1 0 0">
    <div class="ellipsis">
      VerylongtextVerylongtextVerylongtext
    </div>
  </div>
  <!-- Right -->
  <div style="background: red; flex: 1 0 0">
    Right
  </div>
</div>

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

4

Answers


  1. 0

    Remove flex: 1 0 0 in your CSS and replace with width: 50%; – that should do the trick 🙂

    Login or Signup to reply.
  2. 0

    Using width on Flexbox is not a good idea. We have flex-basis for it.

    .ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
    <div style="display: flex">
  <!-- Left -->
  <div style="background: yellow; display:flex; flex-basis: 50%; max-width: 50%">
    VerylongtextVerylongtextVerylongtext
  </div>
  <!-- Right -->
  <div style="background: red; display:flex; flex-basis: 50%; max-width: 50%">
    Right
  </div>
</div>
    Login or Signup to reply.
  3. 0

    Add width: 50% to your 2 child components and remove flex.

    Use flex when they are multiple children and want to share width equally between all child components.

    Login or Signup to reply.
  4. 0

    You can use Bootstrap class="col-6" for two part separate, follow the bellow code example.

    <div class="row">

    <!-- Left Column -->
    <div class="col-6">
        <div class="form-group">
            <label for="party">Party</label>
            <select class="form-control" id="party">
                <option value="">Option 1</option>
            </select>
        </div>
    </div>

    <!-- Right Column -->
    <div class="col-6">
        <div class="form-group">
            <label for="tat">Loom</label>
            <select class="form-control" id="tat">
                <option value="">Option 2</option>
            </select>
        </div>
    </div>

</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search